动态插入的聚合物元件中的数据绑定

Question

有时候我们需要动态地将自定义元素添加到上下文中.然后:

• 插入的聚合物可以接收绑定到上下文中的另一个属性的一些属性,因此它可以相应地改变.

• 在聚合物0.5处,我们可以使用PathObserver将属性绑定到最近添加的组件的上下文属性.但是,我没有在聚合物1.0中找到解决方法或等效物.

我创建了一个0.5的示例,并为1.0创建了相同的示例.请参阅下面的注射聚合物代码.此外,您还可以看到完整的plunker示例,以便清晰.

Ej 0.5:

<polymer-element name="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
  <script>
    Polymer({
      domReady: function() {
        // injecting component into polymer and binding foo via PathObserver
        var el = document.createElement("another-element");
        el.bind("foo", new PathObserver(this,"foo"));
        this.$.dynamic.appendChild(el);
      }
    });
  </script>
</polymer-element>

请参阅完整的plunkr示例:http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6？p = preview

Ej 1.0:

<dom-module id="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: "main-context",
    ready: function() {
      // injecting component into polymer and binding foo via PathObserver
      var el = document.createElement("another-element");
      // FIXME, there's no a path observer: el.bind("foo", new PathObserver(this,"foo"));
      this.$.dynamic.appendChild(el);
    }
  });
</script>

请参阅完整的plunkr示例:http://plnkr.co/edit/K463dqEqduNH10AqSzhp？p = preview

你知道聚合物1.0的一些变通方法或等效方法吗？

Answer 1

现在,没有直接的方法来做到这一点.您应该通过侦听foo父元素的属性中的更改并侦听以foo-changed编程方式创建的元素的事件来手动执行双重绑定.

<script>   
Polymer({
  is: "main-context",
  properties: {
    foo: {
      type: String,
      observer: 'fooChanged'
    }
  },
  ready: function() {
    var self = this;
    var el = this.$.el = document.createElement("another-element");

    //set the initial value of child's foo property
    el.foo = this.foo;
    //listen to foo-changed event to sync with parent's foo property
    el.addEventListener("foo-changed", function(ev){
      self.foo = this.foo;
    });

    this.$.dynamic.appendChild(el);
  },
  //sync changes in parent's foo property with child's foo property
  fooChanged: function(newValue) {
    if (this.$.el) {
      this.$.el.foo = newValue;
    }
  }
});
</script>

你可以在这里看到一个有效的例子:http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o？p = preview

Answer 2

不幸的是,我认为不可能以"干净"的方式做到这一点.要替换Path Observer,我们必须在动态元素的"foo"值上添加链接.第一步是观察"foo"属性值的变化.第二步是复制对创建的每个动态元素的更改.

<dom-module id="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
</dom-module>
<script>
Polymer({
  is: "main-context",
  // Properties used to make the link between the foo property and the dynamic elements.
  properties: {
    foo: {
      type: String,
      observer: 'fooChanged'
    },
    dynamicElements: {
      type: Array,
      value: []
    }
  },
  ready: function() {
    // injecting component into polymer and binding foo via PathObserver
    var el = document.createElement("another-element");
    // Keeps a reference to the elements dynamically created
    this.dynamicElements.push(el);
    this.$.dynamic.appendChild(el);
  },
  // Propagates the "foo" property value changes
  fooChanged: function(newValue) {
    this.dynamicElements.forEach(function(el) {
      el.foo = newValue;
    });
  }
});
</script>

查看完整的Plunkr示例:http://plnkr.co/edit/TSqcikNH5bpPk9AQufez