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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -