使用单选按钮和 Web UI 进行数据绑定答案

【问题标题】：Data binding using radio buttons and Web UI使用单选按钮和 Web UI 进行数据绑定
【发布时间】：2013-03-29 01:14:15
【问题描述】：

我无法使用无线电输入获得以下数据绑定代码：

<!DOCTYPE html>

<html>
  <body>
    <div>
      <input type="radio" name='veggies' value="kale" bind-value={{name}}>Kale<br>
      <input type="radio" name='veggies' value="spinach" bind-value={{name}}>Spinach<br>
      <input type="radio" name='veggies' value="carrots" bind-value={{name}}>Carrots
    </div>

    <p>name = {{name}}</p>

    <script type="application/dart">

      import 'package:web_ui/web_ui.dart';

      @observable
      String name = "Carrots";

      void main() {}

    </script>
  </body>
</html>

文件是radio_binding.html。

当我构建这个文件时，我在 out/radio_binding.html.dart 文件中得到一个错误：

Error: line 42 pos 46: semicolon expected
  __t.listen(__e0.onChange, ($event) { {{name}} = 'kale'; });

这是一个错误还是我做错了什么？

【问题讨论】：

我不是 Dart 用户，但您的 bind-value 属性不需要用引号引起来吗？即它应该是bind-value="{{name}}" ?
过来戴！随着 SIMD for Dart 推出更多功能，我很想向您学习/合作一些神奇的东西：)

标签： dart dart-webui

【解决方案1】：

尝试使用此绑定：

<div>
  <input type="radio" name='veggies' value="Kale" bind-value="name">Kale<br>
  <input type="radio" name='veggies' value="Spinach" bind-value="name">Spinach<br>
  <input type="radio" name='veggies' value="Carrots" bind-value="name">Carrots
</div>

我认为你不需要@observable，我只是用过：

String name = 'Spinach';

【讨论】：

旁注，这些值区分大小写，因此“Carrots”不会匹配“carrots”
当然，将绑定值后的 {{ }} 更改为 "" 可以解决问题。非常感谢。另外，是的，这在没有 @observable 的情况下也可以工作，但是 Web UI 正在摆脱与观察者进行数据绑定的旧方式，而转向使用 \@observable。所以，如果我没记错的话，这是现在数据绑定的首选方式。不幸的是，它的文档记录不是很好。