订阅在ockout.js中动态添加的内容

Question

我正在使用淘汰表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

我看到的最简单的方法是在创建additionalOptions对象时订阅选择。 像这样：

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/