訂閱在knockout.js中動態添加的內容

Question

我使用的是knockout.js 2.3.0，我正在使用一個具有動態生成內容的表格。每個表格行都有一個複選框，每次選中/取消選中某個複選框時，我都會嘗試觸發一個事件。

這裏的HTML表格

<table> 
    <tbody data-bind ="foreach: additionalOptions"> 
     <tr> 
      <td><input type="checkbox" class="optionCheckbox" 
         data-bind="checked: selectedOption"/> 
      </td> 
      <td data-bind="text: name"></td> 
      <td data-bind="text: price" ></td> 
     </tr> 
    </tbody> 
</table> 

這裏是內容實際上是如何加入到additionalOptions陣列

function addOptions(id,name,price){ 
    var self = this; 
    self.id = id; 
    self.name = name; 
    self.price = price; 
    self.selectedOption = ko.observable(false); 
} 


self.additionalOptions = ko.observableArray(); 
self.additionalOptions.push(new addOptions(data[i].id, 
              data[i].name, 
              data[i].price));  

當我訂閱additionalOptions當表充滿內容只觸發。我甚至試圖用jQuery手動subscribe，但那也沒有效果。這是我嘗試的兩件事。

self.additionalOptions.subscribe(function(){ 
    alert('Box has been checked!') 
}); 

$(".optionCheckbox").change(function(){ 
    alert('Box has been checked'); 
}); 

Answer 1

你想要做的是訂閱selectedOption。

你可以做到這一點在addOptions：

self.selectedOption = ko.observable(false); 
self.selectedOption.subscribe(function() { alert("Checbox change"); }); 

或者你推後到observableArray：

self.additionalOptions.push(new addOptions(data[i].id, 
              data[i].name, 
              data[i].price)); 
self.additionalOptions()[self.additionalOptions().length -1].selectedOption.subscribe(function() { alert("Checbox change"); }); 

Answer 2

如果我正確理解您的問題，您將動態創建內容，但點擊處理程序無法正常工作。我的猜測是，當你打電話給活頁夾時，你的目標內容可能還不存在。

我會嘗試委託關閉主表而不是（或任何包含元素最好）。

JS

$('table').on('click', '.optionCheckbox', function(){ 
    alert('box has been checked'); 
}); 

Answer 3

我能看到的最簡單的方法是，當你創建additionOptions對象訂閱選擇。像這樣：

function checkboxTriggered(value) { 
    alert(value ? "Checked!" : "Unchecked!") 
} 

function addOptions(id,name,price){ 
    var self = this; 
    self.id = id; 
    self.name = name; 
    self.price = price; 
    self.selectedOption = ko.observable(false); 
    self.selectedOption.subscribe(checkboxTriggered); 
} 

或者，如果您定義的addOptions功能中的功能，你可以使用封引用具體到一個已經選擇的行屬性。例如：

function addOptions(id,name,price){ 
    var self = this; 
    self.id = id; 
    self.name = name; 
    self.price = price; 
    self.selectedOption = ko.observable(false); 
    self.selectedOption.subscribe(function() { 
     alert("Triggered row with id: "+self.id); 
    }); 
} 

的jsfiddle：http://jsfiddle.net/Retsam19/r7r69/1/