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/

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

3 个答案: