binding - 动态插入的 polymer 元素中的数据绑定(bind)

Question

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

插入的 polymer 可以接收一些与另一个绑定(bind)的属性
上下文中的属性，因此它可以相应地更改。

在 polymer 0.5 中，我们可以使用 PathObserver 将属性绑定(bind)到
最近添加的组件的上下文属性。然而，我没有
在 polymer 1.0 中找到解决方法或等效方法。

我为 0.5 创建了一个示例，为 1.0 创建了一个示例。请参阅下面的 polymer 代码，它使注入(inject)。为了清楚起见，您还可以查看完整的 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

您知道 polymer 1.0 的一些解决方法或等效方法吗？

Answer 1

目前，没有直接的方法可以做到这一点。您应该通过监听 foo 中的更改来手动执行双重绑定(bind)。父元素的属性并监听 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