在knockout.js中为applyBindings实例化viewmodel时绑定会中断

时间:2014-06-09 14:25:50

标签: javascript arrays knockout.js

我必须错过一些非常简单的事情,但我没有看到它。

我有一个简单的viewmodel:

var ViewModel = function() {
    var self = this;
    self.categories = ko.observableArray([{id:'one',display:'ONE'},{id:'two',display:'TWO'}]);
    self.show_subcategories_for = function(category){
        alert(category.id);
    };
};     
ko.applyBindings(ViewModel); 

和html for it:

<div id="categories">
    <!-- ko foreach: categories -->
    <input type="radio" data-bind="attr: { id: id }, click: show_subcategories_for" name="category" />
    <label data-bind="attr: { 'for': id }, text: display"></label>
    <!-- /ko -->
</div>

为它工作jsfiddle:http://jsfiddle.net/J8VNY/2/

然后我试图将类别数组分解出来并希望将其作为参数传递给视图模型,淘汰赛会在“show_subcategories_for未定义”时出错,这肯定存在。

我将viewmodel更改为以下内容:

var ViewModel = function(cats) {
    var self = this;
    self.categories = ko.observableArray(cats);
    self.show_subcategories_for = function(category){
        alert(category.id);
    };
};

ko.applyBindings(new ViewModel(
    [{id:'one',display:'ONE'},{id:'two',display:'TWO'}]
)); 

这里是jsfiddle错误:http://jsfiddle.net/J8VNY/1/

所有内容似乎都是正确的,但出于某种原因,实例化viewmodel并将数组作为参数传递会导致淘汰造成一些混乱。

任何见解都将受到赞赏。谢谢

1 个答案:

答案 0 :(得分:2)

您必须使用$root关键字:

<input type="radio"
       name="category"
       data-bind="attr: { id: id }, click: $root.show_subcategories_for" />

请参阅Documentation