1

我有一个类字段，它是一个字符串，我想使用文本输入来修改该字段。我如何使用 @observable 和 polymer.dart 来做到这一点？

这是我想与 UI 同步的类字段：

class Person {
  @observable String name;
  Person(this.name);
}
4

1 回答 1

4

导入polymer.dart文件并ObservableMixin混入Person. 扩展PolymerElement，并且还使用@CustomTag注释。

下面是使用@observable自定义元素的 dart 文件的样子：

import 'package:polymer/polymer.dart';

class Person extends Object with ObservableMixin {
  @observable String name;
  Person(this.name);
}

@CustomTag("custom-element")
class CustomElement extends PolymerElement {
  @observable Person person = new Person('John');
}

在关联的 .html 文件中，使用{{}}语法创建与@observable字段的绑定：

<!DOCTYPE html>

<html>
  <body>
    <polymer-element name="custom-element">
      <template>
        <label> Name: <input value="{{person.name}}"></label>
        <p>The name is {{person.name}}</p>
      </template>

      <script type="application/dart" src="element.dart"></script>
    </polymer-element>
  </body>
</html>

此元素可以按以下方式使用（注意 的链接boot.js）：

 <!DOCTYPE html>

<html>
  <head>
    <title>index</title>
    <link rel="import" href="element.html">
    <script src="packages/polymer/boot.js"></script>
  </head>

  <body>
    <custom-element></custom-element>
    <script type="application/dart">
      void main() {}
    </script>
  </body>
</html>
于 2013-08-16T00:02:16.147 回答