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

Question

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

一个应该使用content占位符嵌入另一个内部.是否有可能在这两个嵌套之间进行数据绑定polymer-elements？

我试过了,但我无法让它工作:http://jsbin.com/IVodePuS/11/

根据http://www.polymer-project.org/articles/communication.html#bindingpolymer-elements应该工作之间的数据绑定(在这些示例中,它们是在template标记内完成而不使用content占位符).

更新:

斯科特迈尔斯澄清说,数据绑定只适用于该template级别.
但是在我的情况下,我template事先并不知道确切的但是我想允许我的用户parent-element指定child-element它应该包含哪些(假设有不同的child-elements.
我认为这个问题与这个问题有关:使用在光dom中定义的模板在Polymer元素中

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

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

用户可以选择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>

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