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和element2的data之间进行双向数据绑定。有什么想法吗？

Answer 1

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

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

这会将data和my-element1中的my-element2属性绑定到data

中的dom-bind属性

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

请注意，您需要将data和my-element1中的my-element2属性设置为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); 
}

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

2 个答案: