動態插入的聚合物元素中的數據綁定

Question

有時候我們需要動態地將自定義元素添加到上下文中。然後：

• 插入的聚合物可以接收綁定到上下文內的另一個 屬性某些屬性，所以可以相應地改變。

• 在聚合物0.5處，我們可以使用PathObserver將屬性綁定到最近添加的組件的 上下文屬性。但是，我沒有 在聚合物1.0處找到解決方法或等價物。

我已經爲0.5創建了一個例子，並且對於1.0也是如此。請參閱下面的注射聚合物代碼。你也可以看到完整的深入實例。

EJ 0.5：

<polymer-element name="main-context"> 
    <template> 
    <one-element foo="{{foo}}"></one-element> 
    <div id="dynamic"> 
    </div> 
    </template> 
    <script> 
    Polymer({ 
     domReady: function() { 
     // injecting component into polymer and binding foo via PathObserver 
     var el = document.createElement("another-element"); 
     el.bind("foo", new PathObserver(this,"foo")); 
     this.$.dynamic.appendChild(el); 
     } 
    }); 
    </script> 
</polymer-element> 

請參閱完整plunkr例如：http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6?p=preview

EJ 1.0：

<dom-module id="main-context"> 
    <template> 
    <one-element foo="{{foo}}"></one-element> 
    <div id="dynamic"> 
    </div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: "main-context", 
    ready: function() { 
     // injecting component into polymer and binding foo via PathObserver 
     var el = document.createElement("another-element"); 
     // FIXME, there's no a path observer: el.bind("foo", new PathObserver(this,"foo")); 
     this.$.dynamic.appendChild(el); 
    } 
    }); 
</script> 

請參閱完整plunkr例如：http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

你知道一些解決方法或與聚合物1.0等效嗎？

Answer 1

現在，有沒有直接的方法來做到這一點。您應該通過監聽父元素的foo屬性中的更改並監聽以編程方式創建的元素的foo-changed事件來手動執行雙重綁定。

<script> 
Polymer({ 
    is: "main-context", 
    properties: { 
    foo: { 
     type: String, 
     observer: 'fooChanged' 
    } 
    }, 
    ready: function() { 
    var self = this; 
    var el = this.$.el = document.createElement("another-element"); 

    //set the initial value of child's foo property 
    el.foo = this.foo; 
    //listen to foo-changed event to sync with parent's foo property 
    el.addEventListener("foo-changed", function(ev){ 
     self.foo = this.foo; 
    }); 

    this.$.dynamic.appendChild(el); 
    }, 
    //sync changes in parent's foo property with child's foo property 
    fooChanged: function(newValue) { 
    if (this.$.el) { 
     this.$.el.foo = newValue; 
    } 
    } 
}); 
</script> 

這裏你可以看到一個工作示例：http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview

Answer 2

不幸的是我認爲不可能通過「乾淨」的方式做到這一點。要替換Path Observer，我們必須在動態元素的「foo」值更改上添加鏈接。第一步是觀察「foo」屬性值的變化。第二步是將更改複製到每個創建的動態元素。

<dom-module id="main-context"> 
    <template> 
    <one-element foo="{{foo}}"></one-element> 
    <div id="dynamic"> 
    </div> 
    </template> 
</dom-module> 
<script> 
Polymer({ 
    is: "main-context", 
    // Properties used to make the link between the foo property and the dynamic elements. 
    properties: { 
    foo: { 
     type: String, 
     observer: 'fooChanged' 
    }, 
    dynamicElements: { 
     type: Array, 
     value: [] 
    } 
    }, 
    ready: function() { 
    // injecting component into polymer and binding foo via PathObserver 
    var el = document.createElement("another-element"); 
    // Keeps a reference to the elements dynamically created 
    this.dynamicElements.push(el); 
    this.$.dynamic.appendChild(el); 
    }, 
    // Propagates the "foo" property value changes 
    fooChanged: function(newValue) { 
    this.dynamicElements.forEach(function(el) { 
     el.foo = newValue; 
    }); 
    } 
}); 
</script> 

查看完整Plunkr例如：http://plnkr.co/edit/TSqcikNH5bpPk9AQufez