Question

我正在尝试使用templatizer在Polymer元素和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中的任何更改传播到模板。有没有更好的方法呢？我只是想了解这四种方法的作用以及何时/为何应该使用它们。

Answer 1

它胜过我为什么我永远不会让_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.Templatizer的双向数据绑定

1 个答案: