嵌套模板內容和父元素之間的雙向數據綁定

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> 

我已經發現醜陋的方式來設置嵌套在element2數據屬性內部元素1：

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

here is an example

但我的目標是讓家長部件1的_dataElement2和element2的data之間的雙向數據綁定。有任何想法嗎？

Answer 1

組數據，以嵌套元素：

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

Answer 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屬性綁定到一個data財產在dom-bind

這是一個fiddle與一個工作示例。

請記住，你需要爲這個工作組在這兩個my-element1和my-element2爲notify: true的data性能。 （Here's why）