更新

Question

假设我有两个不同的polymer-elements

应使用content占位符将其中一个嵌入到另一个中。是否可以在这两个嵌套polymer-elements之间进行数据绑定？

我试过了，但我无法让它发挥作用：http://jsbin.com/IVodePuS/11/

根据http://www.polymer-project.org/articles/communication.html#binding polymer-elements之间的数据绑定应该有效（在这些示例中，它们是在template标记内完成的，而不使用content占位符。

更新

Scott Miles澄清说，数据绑定仅适用于template级别但是在我的情况下，我事先并不知道确切的template，但我希望允许parent-element的用户指定它应包含哪个child-element（假设有child-elements <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', { data2 : '', ready: function() { } }); </script> </polymer-element> 1}}。
我认为这个问题与这个问题有关：Using template defined in light dom inside a Polymer element

我更新了以下示例以突出显示他的：

child-element

用户可以选择要嵌入的<parent-element data1 = "test"> <child-element data2="{{data1}}"/> </parent-element> <parent-element data1 ="test" > <child2-element data2="{{data1}}"/> </parent-element>：

change watcher

解决方法：

我找到的唯一解决方法是添加getDistributedNodes()并使用data2获取子元素并手动将data设置为<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>：

{{1}}

Answer 1

聚合物数据绑定通过将模型附加到整个子树来工作。

您写道：

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

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

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

现在你遇到了问题。

相反，在Polymer示例中，您会注意到{{}}（几乎总是）在模板内部。例如，如果我定义：

<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），我可以用来在模板描述的整个子树中将事物绑定在一起。

请注意，我不需要attributes="data"才能使用此功能。我补充说，所以host-element公开了data，我可以这样做：

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

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

Answer 2

像魅力一样工作。父元素是发布属性数据，可以通过双向数据绑定。这样子元素就可以获得相同的数据。

<polymer-element name="custom-element">
<template>
    <parent data="{{data}}">
        <child data="{{data}}"></child>
    </parent>
</template>
<script>
    Polymer({
        ready: function() {

        },
        data: {}
    });
</script>

Answer 3

我认为在Polymer＆gt; = 1.0中，这应该使用＆＃34; Auto-binding template＆＃34;来完成。

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

更新

解决方法：

3 个答案: