我正在尝试使用模板生成器在Polymer中的主机元素和模板之间获得两种方式的数据绑定。例如,如果我尝试使两个输入框保持同步:

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


在上面的代码中,我在_forwardInstanceProp中命中了调试器,但没有其他任何一个。为什么是这样?在_forwardInstanceProp内部,我可以访问my-element并手动更新test属性。有一个更好的方法吗?我还可以将my-element的观察者添加到test属性,然后将my-element的所有更改传播到模板。有更好的方法吗?我只是想了解所有这四种方法的用途以及何时/为什么使用它们。

最佳答案

我不知道为什么我永远都无法运行_forwardParentPath_forwardParentProp。但是,我知道其他两个何时运行:)

_forwardInstanceProp运行传递给stamp的模型的直接属性,并初始化_instanceProps

this._instanceProps = {
  text: true
};

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


另一方面,当您将嵌套对象传递给_forwardInstancePath时,stamp运行:

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


有关示例,请参见此bin:http://jsbin.com/kipato/2/edit?html,js,console,output

在标记的模板中,有两个绑定到触发instanceProp和instancePath的两个变量的输入。不幸的是,我无法修复后者发生时抛出的错误。

关于polymer - 使用Polymer.Templatizer进行双向数据绑定(bind),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35901997/

10-12 15:31