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

问题描述

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

• 插入的聚合物可以接收一些与另一种绑定的属性上下文中的属性，因此它可以相应地更改.

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

我为 0.5 创建了一个示例，并且为 1.0 创建了相同的示例.请参阅下面的聚合物代码以进行注射.为了清楚起见，您还可以查看完整的 plunker 示例.

Ej 0.5:

<模板><one-element foo="{{foo}}"></one-element><div id="动态">

<脚本>聚合物({domReady:函数(){//将组件注入聚合物并通过 PathObserver 绑定 foovar el = document.createElement("另一个元素");el.bind("foo", new PathObserver(this,"foo"));this.$.dynamic.appendChild(el);}});</聚合物元素>

请查看完整的 plunkr 示例:http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6?p=preview

Ej 1.0:

<模板><one-element foo="{{foo}}"></one-element><div id="动态">

</dom-module><脚本>聚合物({是:主要上下文"，准备好:函数(){//将组件注入聚合物并通过 PathObserver 绑定 foovar el = document.createElement("另一个元素");//FIXME，没有路径观察者: el.bind("foo", new PathObserver(this,"foo"));this.$.dynamic.appendChild(el);}});

请查看完整的 plunkr 示例:http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

您知道聚合物 1.0 的一些解决方法或等效方法吗?

解决方案

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

您可以在此处查看工作示例:http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview

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.

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

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>

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>

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

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>

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

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