嵌套模板内容和父元素之间的双向数据绑定 [英] two way data binding between nested template content and a parent element

问题描述

聚合物中是否有办法在嵌套模板内容和父元素之间进行双向数据绑定?

Is there a way in polymer to make two-way data-binding between nested template content and a parent element?

Element1:

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

Element2:

<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设置数据属性的一种丑陋方式:

I have found an ugly way to set data attribute for nested element2 inside element1:

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

这是一个示例

但是我的目标是在父element1的_dataElement2和element2的data之间进行两种方式的数据绑定.有什么想法吗?

But my goal is to make two way data-binding between _dataElement2 of the parent element1 and data of the element2. Any ideas?

推荐答案

将数据设置为嵌套元素:

set data to a nested element:

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

这篇关于嵌套模板内容和父元素之间的双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！