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

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

• 插入的聚合物可以获得与另一种聚合物结合的某些性质 属性，因此它可以相应地更改

• 在polymer 0.5中，我们可以使用PathObserver将属性绑定到 最近添加的组件的上下文属性。然而，我没有 在polymer 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>

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

聚合物({
domReady:function（）{
//通过PathObserver将组分注入聚合物并结合foo
var el=document.createElement（“另一个元素”）；
el.bind（“foo”，新病理观察者（本“foo”）；
这个$.dynamic.appendChild（el）；
}
});

请参阅完整的plunkr示例：

Ej 1.0:

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

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

聚合物({
是：“主上下文”，
就绪：函数（）{
//通过PathObserver将组分注入聚合物并结合foo
var el=document.createElement（“另一个元素”）；
//修正我，没有路径观察者：el.bind（“foo”，新的病理观察者（这个“foo”）；
这个$.dynamic.appendChild（el）；
}
});

请参阅完整的plunkr示例：

---

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

不幸的是，我认为用“干净”的方法是不可能做到这一点的。为了替换路径观察者，我们必须在动态元素的“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>

聚合物({
是：“主上下文”，
//用于在foo属性和动态元素之间建立链接的属性。
特性：{
傅：{
类型：字符串，
观察家:"改变"
},
动态加速度：{
类型：数组，
值：[]
}
},
就绪：函数（）{
//通过PathObserver将组分注入聚合物并结合foo
var el=document.createElement（“另一个元素”）；
//保留对动态创建的图元的引用
这个。动态加速度。推（el）；
这个$.dynamic.appendChild（el）；
},
//传播“foo”属性值更改
fooChanged:函数（newValue）{
this.dynamicElements.forEach（函数（el）{
el.foo=新值；
});
}
});

---

请参阅完整的Plunkr示例：

现在，没有直接的方法可以做到这一点。您应该通过侦听父元素的

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>

聚合物({
是：“主上下文”，
特性：{
傅：{
类型：字符串，
观察家:"改变"
}
},
就绪：函数（）{
var self=这个；
var el=this.$.el=document.createElement（“另一个元素”）；
//设置子对象的foo属性的初始值
el.foo=this.foo；
//侦听foo更改事件以与父级的foo属性同步
el.addEventListener（“foo变更”，功能（ev）{
self.foo=this.foo；
});
这个$.dynamic.appendChild（el）；
},
//将父对象的foo属性中的更改与子对象的foo属性同步
fooChanged:函数（newValue）{
如果（此$.el）{
此.$.el.foo=新值；
}
}
});

---

您可以在这里看到一个工作示例：

谢谢，它非常有用：）谢谢您的回答：）