小编rec*_*ing的帖子

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

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

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

  • 在聚合物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>
Run Code Online (Sandbox Code Playgroud)

请参阅完整的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"); …
Run Code Online (Sandbox Code Playgroud)

binding observers web-component polymer polymer-1.0

14
推荐指数
2
解决办法
1万
查看次数

标签 统计

binding ×1

observers ×1

polymer ×1

polymer-1.0 ×1

web-component ×1