Ràng buộc dữ liệu trong một phần tử polymer được chèn động

Question

Có một số lần chúng ta có thể cần thêm một phần tử tùy chỉnh tự động vào một ngữ cảnh. Sau đó:

• Polyme chèn có thể nhận được một số tính chất ràng buộc để tài sản khác trong bối cảnh, vì vậy nó có thể thay đổi cho phù hợp.

• Tại polymer 0,5, chúng tôi có thể sử dụng PathObserver để liên kết thuộc tính với thuộc tính ngữ cảnh cho thành phần được thêm gần đây. Tuy nhiên, tôi không tìm giải pháp thay thế hoặc tương đương tại polymer 1.0.

Tôi đã tạo ví dụ cho 0,5 và chỉ giống với ví dụ 1.0. Xem bên dưới mã của polymer mà nó làm cho tiêm. Ngoài ra, bạn có thể xem các ví dụ đầy đủ cho rõ ràng.

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> 

Xin vui lòng, thấy plunkr đầy đủ ví dụ: 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> 

Xin vui lòng, xem toàn bộ ví dụ plunkr: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

Bạn có biết một số cách giải quyết hoặc tương đương với polymer 1.0 không?

Answer 1

Ngay bây giờ, không có cách nào trực tiếp để làm điều đó. Bạn nên tự làm liên kết kép bằng cách nghe các thay đổi trong thuộc tính foo của phần tử gốc và nghe sự kiện foo-changed của phần tử được tạo lập trình.

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

Bạn có thể thấy một ví dụ làm việc ở đây: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview

Answer 2

Rất tiếc, tôi không thể thực hiện điều này bằng cách "sạch". Để thay thế Trình theo dõi đường dẫn, chúng tôi phải thêm liên kết trên giá trị "foo" thay đổi thành các yếu tố động. Bước đầu tiên là quan sát các thay đổi giá trị thuộc tính "foo". Bước thứ hai là nhân rộng các thay đổi cho từng yếu tố động được tạo ra.

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

Xem Plunkr đầy đủ ví dụ: http://plnkr.co/edit/TSqcikNH5bpPk9AQufez