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

Polymer 嵌套模板内容和父元素之间的双向数据绑定,polymer,polymer-1.0,Polymer,Polymer 1.0,在polymer中是否有一种方法可以在嵌套模板内容和父元素之间进行双向数据绑定 要素1: <dom-module id='my-element1'> <template> [[data]] <div id="content"> <content selector="element-content"></content> </div> </template> &

在polymer中是否有一种方法可以在嵌套模板内容和父元素之间进行双向数据绑定

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


但我的目标是在父元素1的
\u dataElement2
和元素2的
数据
之间进行双向数据绑定。有什么想法吗?

您需要做的就是在
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绑定中的
data
属性

下面是一个例子


请记住,您需要将
my-element1
my-element2
中的
data
属性设置为
notify:true
,才能使其正常工作。()

您只需将数据绑定设置为
my-element2
上的
数据
,如下所示:

<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绑定中的
data
属性

下面是一个例子


请记住,您需要将
my-element1
my-element2
中的
data
属性设置为
notify:true
,才能使其正常工作。()

将数据设置为嵌套元素:

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); 
}

将数据设置为嵌套元素:

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); 
}

这完全不是我想要的。正如我所写的,我需要在父元素1的
\u dataElement2
和元素2的
数据
之间进行双向数据绑定。是的
\u dataElement2
应该是私有的。之所以这样做,是因为我需要通过
\u dataElement2
将修改后的数据传递给嵌套元素。这种修改应该在父级内部完成。另一方面,嵌套元素应该能够更改父元素的
\u dataElement2
。这完全不是我想要的。正如我所写的,我需要在父元素1的
\u dataElement2
和元素2的
数据
之间进行双向数据绑定。是的
\u dataElement2
应该是私有的。之所以这样做,是因为我需要通过
\u dataElement2
将修改后的数据传递给嵌套元素。这种修改应该在父级内部完成。另一方面,嵌套元素应该能够更改父元素的
\u dataElement2