CODEWITHSUNDEEP
polymer
batman
batman

Reputation: 5380

How does data-binding in Polymer work?

<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?

Upvotes: 9

Views: 6771

Answers (4)

Donato Pirozzi
Donato Pirozzi

Reputation: 759

In Polymer 1.0 there is the two ways data binding for native elements or in general non-Polymer elements. You need to specify the event ::input as in the following instruction:

 <input id="input" value="{{modelvalue::input}}" type="text" />

Anytime the user types something in the text box, the modelvalue property is updated. Hence, element attribute value and property value are in sync.

Code snippet

The following is a complete working and running example:

<base href="http://polygit.org/components/">
<link href="polymer/polymer.html" rel="import">

<dom-module is="new-wc">
    <template>
       
      <input id="input" value="{{modelvalue::input}}" type="text" />
      
      <p>
        Default value is <span>{{modelvalue}}</span>  
      </p>
      
    </template>
    <script>
      Polymer({
         is: "new-wc",

         properties: {
            modelvalue: { type: String, value: "0" }
         }
      });
    </script>
</dom-module>

<p><b>Code snippet description: </b>this polymer code snippet demonstrates how to use the two ways binding for native or non-polymer elements. Just type something within the text box and you will see the typed text updated below.</p>
  
<new-wc></new-wc>

Upvotes: 4

Bahtiyar &#214;zdere
Bahtiyar &#214;zdere

Reputation: 1918

Non polymer elements (basic html tags) needs to tell polymer when will they update the value by event names. So value={{value::eventname}} For text inputs ->

value={{value::input}}

Upvotes: 0

CletusW
CletusW

Reputation: 3980

Reflecting property values back to the attribute is now opt-in. The docs are in the process of being updated to reflect this. To get this behavior, instead of using the attributes attribute on your polymer-element tag, use the publish property in your call to Polymer(), like so:

Polymer({
  publish: {
    // won't reflect to an attribute
    bigText: '',
    // will reflect to an attribute
    active: {value: false, reflect: true}
  },
  ...
)};

Upvotes: 6

ebidel
ebidel

Reputation: 24109

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

Upvotes: 3

Related Questions