javascript - Polymer 1.0: Two-way bindings with input elements -
code
consider following polymer custom element:
<dom-module id="test-element"> <template> <input type="text" value="{{value}}"> <button>reset</button> </template> <script> polymer({ is: 'test-element', properties: { 'value': { type: string, reflecttoattribute: true, notify: true, value: null } } }); </script> </dom-module>
i use custom element in index.html follows:
<html> <head> <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="test-element.html"> <title>test app</title> </head> <body> <test-element value="test"></test-element> </body> </html>
question
i believe have declared value
property two-way binding (notify: true
); yet when click on input , type in text (say, "foo"
), not reflected in model (i.e. call document.queryselector('test-element').value
returns value set in index.html, "test"
). interestingly enough, value
attribute of input changes correctly, value property of test-element not. missing?
i should note call document.queryselector('test-element').setattribute('value', 'bar')
works properly.
first note notify
, reflecttoattribute
fields on value
property tell how react it's parent not how bind child.
iow, notify: true
means make value
two-way bindable outside, not inside. reflecttoattribute: true
tells polymer write value
attribute every time changes (not performance).
when binding <x-element foo="{{value}}">
, it's x-element decides if foo
two-way bindable.
native elements input
not have two-way binding support built in, instead use polymer's event-observer syntax two-way bind input. <input value="{{value::change}}">
.
this tells polymer update this.value
input.value
whenever input
fires change
event.
Comments
Post a Comment