Làm cách nào để liên kết các phần tử mới bằng cách loại trực tiếp?

Question

Tôi làm cách nào để ràng buộc thành phần mới được tạo sau khi trang đã tải?

Tôi có một cái gì đó như thế này

system = function() 
{ 

    this.hello = function() 
    { 
     alert("hello"); 
    } 

    this.makeUI = function(container) 
    { 
     div = document.createElement("div"); 
     div.innerHTML = "<button data-bind='click: hello'>Click</button>"; 
    } 
} 

ko.applyBindings(new system); 

Nếu tôi cố gắng này

this.makeUI = function(container) 
{ 
    div = document.createElement("div"); 
    div.innerHTML = "<button data-bind='click: hello'>Click</button>"; 
    ko.applyBindings(new system,div); 
}  

nhưng theo theseposts nó sẽ không hoạt động.

Answer 1

Mục tiêu với loại trực tiếp là chỉ gọi knockout một lần trên một tập hợp các phần tử dom. Do đó nếu bạn gọi applyBindings nhiều lần trên toàn bộ tài liệu, bạn sẽ có vấn đề với nhiều ràng buộc.

Có một vài trường hợp việc gọi applyBindings nhiều lần là hợp lý và điều này là trong trường hợp một phần lượt xem không nằm trong dom tại thời điểm ràng buộc đầu tiên và do đó không bị ràng buộc. Bạn có thể ràng buộc chúng bằng cách chọn lọc phạm vi applyBindings cho phần tử dom đó.

Đây là ví dụ về những gì bạn đang cố gắng đạt được. Vấn đề của bạn là bạn không chèn nút bạn đã tạo.

http://jsfiddle.net/madcapnmckay/qSqJv/

tôi sẽ không khuyên bạn nên phương pháp này cho ví dụ cụ thể này, có một cách tốt hơn.

Nếu bạn muốn tạo ra các phần tử dom động và bị ràng buộc bởi loại trực tiếp, cách tiếp cận phổ biến nhất là sử dụng chức năng tạo khuôn mẫu trong đó chú ý chèn các phần tử và ràng buộc bất kỳ thuộc tính liên kết dữ liệu nào tìm thấy.

Vì vậy, nếu bạn muốn tạo một số nút của bạn có thể làm

this.makeUI = function(container) 
{ 
    self.buttons.push({ 
     text: "button " + self.buttons().length, 
     handler: this.hello 
    }); 
} 

Dưới đây là một fiddle.

http://jsfiddle.net/madcapnmckay/ACjvs/

Hy vọng điều này sẽ hữu ích.