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

【问题标题】：Why doesn't ko.observableArray.length return length of underlying array?为什么 ko.observableArray.length 不返回底层数组的长度？
【发布时间】：2013-04-26 16:35:14
【问题描述】：

使用 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>

【问题讨论】：

标签： javascript arrays knockout.js knockout-2.0

【解决方案1】：

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

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

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

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

【讨论】：

有道理 - 我知道这是一个函数，但没有意识到 length 属性表示函数的参数数量 - 很高兴知道！谢谢。

【解决方案2】：

这是因为 ko.observableArray 并不是真正的数组。它是一个返回底层数组的函数。

在您的示例中，由于 items 是一个函数，因此您会得到一个 .length = 0。

请检查这个小提琴，我在其中添加了一些附加属性的跨度

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

【讨论】：

谢谢。我将接受 Jeroen 的回答，因为它更完整一些。不过，我感谢您的帮助！