Polymer 嵌套模板内容和父元素之间的双向数据绑定
在polymer中是否有一种方法可以在嵌套模板内容和父元素之间进行双向数据绑定 要素1: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> &
<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
。