dart - Observable field and text input in polymer -
i have class field string , want use text input modify field. how can use @observable polymer.dart this?
here class field sync-up ui:
class person { @observable string name; person(this.name); }
import polymer.dart file , mix in observablemixin person. extend polymerelement, , use @customtag annotation.
here dart file using @observable custom element like:
import 'package:polymer/polymer.dart'; class person extends object observablemixin { @observable string name; person(this.name); } @customtag("custom-element") class customelement extends polymerelement { @observable person person = new person('john'); } in associated .html file, use {{}} syntax create binding @observable field:
<!doctype html> <html> <body> <polymer-element name="custom-element"> <template> <label> name: <input value="{{person.name}}"></label> <p>the name {{person.name}}</p> </template> <script type="application/dart" src="element.dart"></script> </polymer-element> </body> </html> this element can used in following manner (note link 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>
Comments
Post a Comment