How does data-binding in Polymer work?
polymer
Solution
You don't see the binding (e.g. `{{value}}`) on the input's `value` attribute change because Polymer needs to establish a two-way binding on that property. If it were to be replaced by the actual value, the value would no longer be data-bound.
There's an entire section in Polymer docs on "How data binding works": http://www.polymer-project.org/docs/polymer/databinding-advanced.html#how-data-binding-works
I was thinking that `value={{value}}` is a way of saying "when the `value` property changes, change the `value` attribute and vice versa".
Under the hood, Polymer uses the `Node.bind()` library to bind the property changes of elements to data. Inputs in particular support 2-way data binding on their `value` and `checked` attributes:
http://www.polymer-project.org/docs/polymer/binding-types.html#binding-to-input-values http://www.polymer-project.org/docs/polymer/node_bind.html
Problem
``` <link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="new-tag"> <template> <input id="input" value="{{value}}" type="text" /> </template> <script> (function () { Polymer("new-tag", { value: "" }); })(); </script> </polymer-element> ``` If I change the `value` property of the DOM object (in JS) I can see that the text field's value changes. If I change the text field value, the DOM object property `value` also changes. But both these changes don't affect the `value` attribute. If the `value` attribute doesn't change, how is the change in model, reflecting in the view? I was thinking that `value={{value}}` is a way of saying "when the `value` property changes, change the `value` attribute and vice versa". But if `value` attribute is not being the link between the view and the model, how are the changes being propagated? Also, what exactly does `value={{value}}` mean?