使用Polymer.Templatizer进行双向数据绑定_Polymer

使用Polymer.Templatizer进行双向数据绑定

polymer

使用Polymer.Templatizer进行双向数据绑定,polymer,Polymer,我正在尝试使用templatizer在聚合物中获得主体元素和模板之间的双向数据绑定。例如，如果我试图使两个输入框保持同步： <html> <body> <my-element> <template > <input type="text" value="{{test::change}}" /> <div>The value of 'test' is: <span&

我正在尝试使用templatizer在聚合物中获得主体元素和模板之间的双向数据绑定。例如，如果我试图使两个输入框保持同步：

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


“test”的值是：{{test}
价值：
{{test}}
聚合物({
是‘我的元素’，
测试：{
类型：字符串，
价值：“a”
},
行为：[Polymer.Templatizer]，
_forwardParentProp:函数（prop，value）{debugger}，
_forwardParentPath:函数（路径，值）{debugger}，
_forwardInstanceProp:函数（inst、prop、value）{debugger}，
_forwardInstancePath:函数（inst、path、value）{debugger}，
就绪：函数（）{
这是。_instanceProps={
测试：正确
};
var templates=Polymer.dom（this.$.template）.getDistributedNodes（）；
模板=模板[1]；
这个.templatize（模板）；
var itemNode=this.stamp（{test:this.test}）；
dom（this.$.items）.appendChild（itemNode.root）；
}
});

在上面的代码中，我点击了_forwardInstanceProp中的调试器，但没有点击任何其他调试器。为什么会这样？在_forwardInstanceProp中，我可以访问我的元素并手动更新测试属性。有更好的方法吗？我还可以将元素上的观察者添加到test属性，然后将元素中的任何更改传播到模板。有更好的方法吗？我只是想了解这四种方法都做了什么，以及何时/为什么应该使用它们。

我不明白为什么我既不能运行

\u forwardParentPath

也不能运行

\u forwardParentProp

。但是，我知道其他两个是什么时候运行的：）

\u forwardInstanceProp

为传递给

stamp

的模型的直接属性运行，并且

\u instanceProp

已初始化：

this._instanceProps = {
  text: true
};

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

\u forwardInstancePath

则在将嵌套对象传递给

stamp

时运行：

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

有关示例，请参见此箱子：

在戳记模板中，有两个输入绑定到两个变量，这两个变量触发instanceProp和instancePath。不幸的是，我无法修复后一种情况发生时抛出的错误