Polymer: Updating Templatized template when parent changes

问题

Following this question, I'm trying to get full two-way binding between parent and template when using Polymer.Templatizer. I'm not sure what the problem is _forwardParentProp and _forwardParentPath are never called when a property changes on parent. I think it's the reason why my templates don't update.

Here's my code (also available here). As you can see dom-if binds both ways and the two templates (one created dynamically other declared inside custom element) only update parent but aren't themselves updated.

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');
    }
  });

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

来源：https://stackoverflow.com/questions/37989743/polymer-updating-templatized-template-when-parent-changes

标签

javascript

templates

data-binding

polymer

polymer-1.0