CODEWITHSUNDEEP
polymer
Miles Douglas
Miles Douglas

Reputation: 87

Two way data binding with Polymer.Templatizer

I am trying to get two way data-binding between a host element and a template in Polymer using templatizer. For example if I am trying to keep two input boxes in-sync: 

<html>
  <body>
    <my-element>
      <template >
        <input type="text" value="{{test::change}}" />
        <div>The value of 'test' is: <span>{{test}}</span></div>
      </template>
    </my-element>

   <dom-module id="my-element">
      <template>
         <input type="text" value="{{test::change}}" />
           value:
           <p>{{test}}</p>
           <div id="items"></div>
           <content id="template"></content>
      </template>
   </dom-module>

   <script>

    Polymer({
      is: 'my-element',
      test: {
        type: String,
        value: "a"
      },
     behaviors: [ Polymer.Templatizer ],
     _forwardParentProp: function(prop, value) {debugger},
     _forwardParentPath: function(path, value) {debugger},
     _forwardInstanceProp: function(inst, prop, value) {debugger},
     _forwardInstancePath: function(inst, path, value) {debugger},
     ready: function() {
     this._instanceProps = {
       test: true
     };
     var templates = Polymer.dom(this.$.template).getDistributedNodes();
     template = templates[1];
     this.templatize(template);
     var itemNode = this.stamp({ test: this.test});
     Polymer.dom(this.$.items).appendChild(itemNode.root);
    }
   });

   </script>
  </body>
</html>

In the above code I hit the debugger in the _forwardInstanceProp but not any of the others. Why is this? Inside _forwardInstanceProp I can access my-element and manually update the test property. Is there a better way to do this? I also could add an observer on my-element to the test property and then propagate any changes in my-element to the template. Is there a better way to do that? I am just trying to understand what all four of these methods do and when/why they should be used.

Upvotes: 3

Views: 861

Answers (1)

Tomasz Pluskiewicz
Tomasz Pluskiewicz

Reputation: 3662

It beats my why I can never get neither _forwardParentPath nor _forwardParentProp to run. However, I know when the other two run :)

_forwardInstanceProp runs for direct properties of model passed to stamp and _instanceProps is initialized:

this._instanceProps = {
  text: true
};

var clone = this.stamp({
  text: this.text
});

_forwardInstancePath on the other hand runs when you pass nested objects to stamp:

var clone = this.stamp({
  nested: {
    text: this.text
  }
});

See this bin for an example: http://jsbin.com/kipato/2/edit?html,js,console,output

In the stamped template there are two inputs bound to two variables which trigger instanceProp and instancePath. Unfortunately I've been unable to fix the error thrown when the latter happens.

Upvotes: 1

Related Questions