如何使用ko.observableArray?

时间:2013-10-19 16:28:30

标签: javascript knockout.js ko.observablearray

我写了一个简单的例子来了解ko.observableArray是如何工作的。

**HTML**:
Count is : <span data-bind="text anotherObservableArray().length"> </span>

JS:
var anotherObservableArray = ko.observableArray( [
{ name: "A", type: "A" },
{ name: "B", type: "B" },
{ name: "C", type: "C" }
]);

ko.applyBindings(anotherObservableArray);

以下是我尝试实施

的示例链接

http://jsfiddle.net/Rama_Kishore/ZPDBv/

我期待“Count is:3”输出,而不是输出是“Count is:”

请让我知道为什么没有显示计数。

感谢。

3 个答案:

答案 0 :(得分:2)

这是你小提琴的工作分叉:

http://jsfiddle.net/myjkk/2/

请注意 text binding 语法包含冒号:

<span data-bind="text: anotherObservableArray().length"></span>

在javascript中注意如何使用ko.applyBindings。查看淘汰文档 for Activating Knockout:http://knockoutjs.com/documentation/observables.html

var vm = {
    anotherObservableArray: ko.observableArray([{
        name: "A",
        type: "A"
    }, {
        name: "B",
        type: "B"
    }, {
        name: "C",
        type: "C"
    }])
};

ko.applyBindings(vm);

另外值得注意的是,你的原始小提琴是包括knockoutjs库。

答案 1 :(得分:1)

几个问题:

  • 你没有将Knockout作为js小提琴中的库
  • 您没有提供包装可观察数组的虚拟对象
  • 你在绑定中输错了

小提琴:link

var vm = {
    anotherObservableArray : ko.observableArray( [
       { name: "A", type: "A" },
       { name: "B", type: "B" },
       { name: "C", type: "C" }
    ])
}
 ko.applyBindings(vm);

答案 2 :(得分:0)

ko.observableArray应该是model对象的一部分 例如。

var viewModel = new function()
{
   this.anotherObservableArray = ko.observableArray(...);
}  

var viewModel = {
   anotherObservableArray : ko.observableArray(...);
}  

应用绑定

ko.applyBindings(viewModel);  

JSFiddle DEMO

你可以在这里找到非常好的knockout online-tutorial