我有一个类字段，它是一个字符串，我想使用文本输入来修改该字段。我如何使用 @observable 和 polymer.dart 来做到这一点？
这是我想与 UI 同步的类字段:
class Person {
@observable String name;
Person(this.name);
}
最佳答案
导入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 创建绑定(bind)的语法 field :<!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>
关于dart - polymer 中的可观察字段和文本输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18263845/