嵌套聚合物元素之间的数据绑定

概述假设我有两个不同的聚合物元素 一个应该使用内容占位符嵌入其他内部. 这两个嵌套的聚合物元素之间是否可以进行数据绑定？ 我试过,但我不能让它上班：http://jsbin.com/IVodePuS/11/ 根据http://www.polymer-project.org/articles/communication.html#binding,聚合物元素之间的数据绑定应该起作用(在这些例子中,它们在模 假设我有两个不同的聚合物元素

一个应该使用内容占位符嵌入其他内部.
这两个嵌套的聚合物元素之间是否可以进行数据绑定？

我试过,但我不能让它上班：http://jsbin.com/IVodePuS/11/

根据http://www.polymer-project.org/articles/communication.html#binding,聚合物元素之间的数据绑定应该起作用(在这些例子中,它们在模板标签内完成,而不使用内容占位符).

更新：

Scott Miles澄清说,数据绑定只适用于模板级别.
然而,在我的情况下,我不会事先知道确切的模板,但我想允许我的parent-element的用户指定它应该包含哪个子元素(前提是有不同的子元素.
我认为这个问题与这个问题有关：Using template defined in light dom inside a Polymer element

我更新了下面的例子来强调他的：

<polymer-element name="parent-element" >  <template >    <div>Parent data: {{data1}} </div>    <content />  </template>  <script>    polymer('parent-element',{      data1 : '',ready: function() {        this.data='parent content';      }    });  </script></polymer-element><polymer-element name="child-element" attributes="data2">   <template>    <div>Parent data: {{data2}} </div>  </template>  <script>    polymer('child-element',{      data2 : '',ready: function() {      }    });  </script></polymer-element><polymer-element name="child2-element" attributes="data2">   <template>    <div>Parent data: {{data2}} </div>  </template>  <script>    polymer('child2-element',ready: function() {      }    });  </script></polymer-element>

用户可以选择要嵌入的子元素：

<parent-element data1 = "test">  <child-element data2="{{data1}}"/></parent-element><parent-element data1 ="test" >  <child2-element data2="{{data1}}"/></parent-element>

解决方法：

我发现唯一的解决方法是添加更改观察器并使用getdistributedNodes()来获取子元素,并手动将data2设置为数据：

<polymer-element name="parent-element" >  <template >    <div>Parent data: {{data}} </div>    <content ID="content"/>  </template>  <script>    polymer('parent-element',{      data : '',ready: function() {        this.data='parent content';      },dataChanged : function() {          contents = this.$.content.getdistributedNodes();          if (contents.length > 0) {              contents[0].data2 = this.data;          }      },});  </script></polymer-element>

解决方法 聚合物数据绑定通过将模型附加到整个子树来进行.

你写了：

<parent-element>  <child-element data2="{{data}}"/></parent-element>

这意味着parentNode提供绑定模型的规则.但现在想象你想写：

<parent-element>  <div>    <child-element data2="{{data}}"></child-element>  </div></parent-element>

现在你有一个问题.

相反,在聚合物示例中,您将注意到{{}}(几乎总是)在模板内部.例如,如果我定义：

<polymer-element name="host-element" attributes="data" noscript><template>  <parent-element data1="{{data}}">    <child-element data2="{{data}}"></child-element>  </parent-element></template></polymer-element>

现在,我有一个模型上下文(host-element),可以在模板描述的整个子树中将东西绑定在一起.

请注意,我不需要属性=“数据”,以使其工作.我补充说,所以host-element公开数据,我可以这样做：

<host-element data="test"></host-element>

http://jsbin.com/IVodePuS/15/edit

总结

以上是内存溢出为你收集整理的嵌套聚合物元素之间的数据绑定全部内容，希望文章能够帮你解决嵌套聚合物元素之间的数据绑定所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。