嵌套模板内容和父元素之间的双向数据绑定

Question

聚合物中有没有一种方法可以在嵌套模板内容和父元素之间进行双向数据绑定？

元素 1:

<dom-module id='my-element1'>
  <template>
     [[data]]
     <div id="content">
        <content selector="element-content"></content>
     </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element1',
    properties: {
      data: String,
      _dataElement2: String
    }
  });
</script>

元素 2：

<dom-module id='my-element2'>
  <template>
     [[data]]
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element2',
    properties: {
      data: String
    }
  });
</script>

嵌套：

<my-element1 data='{{data}}'>
  <element-content>
    <my-element2></my-element2>
  </element-content>
</my-element1>

我发现了一种丑陋的方法来为 element1 中的嵌套 element2 设置数据属性：

this.$.content.children[0].children[0].setAttribute('data', this.data);

here is an example

但我的目标是在父元素 1 的 _dataElement2 和元素 2 的 data 之间建立双向数据绑定。有什么想法吗？

Answer 1

您需要做的就是在 my-element2 上设置到 data 的数据绑定，如下所示：

<template is="dom-bind">
  <my-element1 data='{{data}}'>
    <element-content>
      <my-element2 data="{{data}}"></my-element2>
    </element-content>
  </my-element1>
</template>

这会将 my-element1 和 my-element2 中的 data 属性绑定到 dom-bind[=24 中的 data 属性 =]

这是一个带有工作示例的 fiddle。

请记住，您需要将 my-element1 和 my-element2 中的 data 属性设置为 notify: true 才能正常工作。 (Here's why)

Answer 2

将数据设置为嵌套元素：

Polymer.dom(this).firstElementChild.firstElementChild.set('data', this.dataToSet);

从嵌套元素接收数据：

ready() {
    Polymer.dom(this).firstElementChild.firstElementChild.addEventListener('data-changed', this._onChildDataChange.bind(this));
},

_onChildDataChange(e) {
    console.log('received data is', e.detail.value); 
}

嵌套模板内容和父元素之间的双向数据绑定

two way data binding between nested template content and a parent element

polymer

polymer-1.0