为什么ko.observableArray.length不返回底层数组的长度?

时间:2013-05-02 13:22:53

标签: javascript arrays knockout.js knockout-2.0

使用Knockout,在使用observableArray时,必须获取底层数组(myArray())才能读取长度。我不明白为什么myArray.length不会返回基础数组的长度(而是返回0)。这是一个错误还是我错过的原因?

JSFiddle: http://jsfiddle.net/jsm11482/LJVWE/

JS /型号

var data = {
    name: ko.observable("Test"),
    items: ko.observableArray([
        { name: ko.observable("First Thing"), value: ko.observable(1) },
        { name: ko.observable("Second Thing"), value: ko.observable(2) },
        { name: ko.observable("Third Thing"), value: ko.observable(3) }
    ])
};

ko.applyBindings(data, document.getElementsByTagName("div")[0]);

HTML

<div>
    <h1 data-bind="text: name"></h1>
    <ul data-bind="foreach: items">
        <li data-bind="text: value() + ': ' + name()"></li>
    </ul>

    <div>
        <strong>data.items.length == </strong>

        <!-- Expecting 3, get 0. -->
        <span data-bind="text: items.length"></span>
    </div>
    <div>
        <strong>data.items().length == </strong>

        <!-- Expecting 3, get 3. -->
        <span data-bind="text: items().length"></span>
    </div>
</div>

2 个答案:

答案 0 :(得分:5)

这是因为普通items observable实际上是一个Function,它有自己的length属性来指示预期的参数数量。

来自MDN's page on Functions (properties section)

  

length
  指定函数预期的参数数量。

作为使用KnockoutJS库的开发人员,我最初期望 observableArray的长度是底层数组的长度,但我很欣赏KO库不覆盖此Function属性,因为这可能会导致其他不必要的副作用。

答案 1 :(得分:2)

这是因为ko.observableArray实际上不是一个数组。它是一个返回底层数组的函数。

在您的示例中,由于项目是一项功能,因此您获得.length = 0

请检查这个小提琴,我添加了一些附加属性

http://jsfiddle.net/LJVWE/3/