13

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

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

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

根据http://www.polymer-project.org/articles/communication.html#binding data-binding betweenpolymer-elements应该可以工作（在那些例子中，它们是在template标签内完成的，没有使用content占位符）。

更新：

Scott Miles 澄清说，数据绑定仅适用于该template级别。
但是在我的情况下，我事先不知道确切的template内容，但我想允许我的用户parent-element指定child-element它应该包含的内容（前提是有不同的child-elements.
我认为这个问题与这个问题有关：Using template defined in light 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>
4

3 回答 3

6

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

你写了：

<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"。我补充说，所以主机元素暴露data，我可以这样做：

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

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

于 2014-05-07T17:38:59.337 回答
0

奇迹般有效。父元素发布属性数据，可以通过2路数据绑定。这样子元素获得相同的数据。

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

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

于 2014-12-17T10:11:56.367 回答
0

我认为在 Polymer >= 1.0 中，这应该使用“自动绑定模板”来完成。

于 2016-04-22T08:26:05.093 回答