在动态插入聚合物元件数据绑定 [英] Data binding in a dynamically inserted polymer element

问题描述

有一些是时候我们可能需要动态地添加自定义元素插入的上下文。然后：

There're some times when we could need adding a custom element dynamically into a context. Then:

• 插入聚合物能接受绑定到另一个一些属性
  上下文内部属性，所以可以相应地改变。

• The inserted polymer could receive some properties bound to another property inside the context, so it can change accordingly.

目前聚合物0.5我们可以使用PathObserver一个属性绑定到一个
上下文属性为最近添加的组件。但是，我没有
找到聚合物1.0一种解决方法或同等学历。

At polymer 0.5 we could use PathObserver to binding a property to a context property for a recently added component. However, I did not find a workaround or equivalent at polymer 1.0.

我已经创建了一个例子为0.5，只是同为1.0。见下文，它使喷射聚合物的code。你还可以看到完整的plunker示例清晰。

I have created an example for 0.5 and just the same for 1.0. See below the code of the polymer that it makes the injection. Also you can see the full plunker examples for clarity.

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例如：<一href=\"http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6?p=$p$pview\">http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6?p=$p$pview

Please, see the full plunkr example: 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例如：<一href=\"http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=$p$pview\">http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=$p$pview

Please, see the full plunkr example: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

你知道一些解决办法或同等聚合物1.0？

Do you know some workaround or equivalent with polymer 1.0?

推荐答案

目前，没有直接的办法做到这一点。您可以手动应通过听父元素的富属性更改，并听取了富-改变以编程方式创建的元素的事件。

Right now, there is no direct way to do it. You should manually do the double binding by listening to changes in the foo property of the parent element and listening to the foo-changed event of the programmatically created element.

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

您可以在这里看到一个工作的例子：<一href=\"http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=$p$pview\">http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=$p$pview

You can see a working example here: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview

这篇关于在动态插入聚合物元件数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！