String のクラス フィールドがあり、テキスト入力を使用してそのフィールドを変更したいと考えています。@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
<!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>