Question

在this question之后，我尝试在使用Polymer.Templatizer时在父级和模板之间获得完全的双向绑定。我不确定问题是什么_forwardParentProp和_forwardParentPath在父级更改属性时永远不会被调用。我认为这就是我的模板不能更新的原因。

这是我的代码（也可用here）。正如您所看到的，dom-if绑定了两种方式，两种模板（一种动态创建的其他模板在自定义元素内声明）仅更新父级，但不会自行更新。

＆＃13;

Polymer({
    is: "my-app",
    behaviors: [Polymer.Templatizer],
    properties: {
      global: {
        value: {
          text: 'i'
        },
        notify: true
      }
    },
    ready: function() {
      this.count = 0;

      // this ensures that global.text is updated when text changes
      this._instanceProps = {
        text: true
      };
      
      this.addHeadline(this.$.template);          
      this.addHeadline(this._dynamicTemplate());
    },
    addHeadline: function(template) {         

      this.templatize(template);
      var clone = this.stamp({
        text: this.global
      });

      // Append to my-app
      Polymer.dom(this.root).appendChild(clone.root);
    },
    _dynamicTemplate: function() {
      var template = document.createElement("template");
      var templateRoot = document.createElement('div');
      templateRoot.innerHTML = '<h1>{{text.text}}</h1><input type="text" value="{{text.text::input}}" />';
      // you cannot just set innerHTML in <template>
      template.content.appendChild(templateRoot);
      
      return template;
    },
    _forwardInstanceProp: function(inst, p, val) {
      console.log('_forwardInstanceProp');
    },
    _forwardInstancePath: function(inst, p, val) {
      // notify parent's correct path when text.text changes
      this.set(p.replace(/^text/, 'global'), val);
      console.log('_forwardInstancePath');
    },
    _forwardParentProp: function(prop, value) {
      console.log('_forwardParentProp');
    },
    _forwardParentPath: function(prop, value) {
      console.log('_forwardParentPath');
    }
  });

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
  <link rel="import" href="paper-input/paper-input.html"/>
</head>

<body>

  <dom-module id="my-app">
    <template>
      <paper-input label="global.text" value="{{global.text}}"></paper-input>
      <p>global.text: &lt;{{global.text}}&gt;</p>
      
      <template id="template">
        <h1>{{text.text}}</h1><input type="text" value="{{text.text::input}}" />
      </template>

      <template if="true" is="dom-if">
        <div>
          dom-if:
          <input type="text" value="{{global.text::input}}" />
        </div>
      </template>
    </template>

  </dom-module>
  <my-app></my-app>
</body>

</html>

＆＃13;

聚合：父更改时更新模板化模板

0 个答案: