Two way data binding with Polymer.Templatizer

Viewed 837

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.

1 Answers
Related