假设我有两个不同的聚合物元素
一个应该使用内容占位符嵌入其他内部.
这两个嵌套的聚合物元素之间是否可以进行数据绑定?
我试过,但我不能让它上班: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>