Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't ko.observableArray.length return length of underlying array?

Using Knockout, when working with an observableArray, you must grab the underlying array (myArray()) in order to read the length. I don't understand why myArray.length wouldn't return the underlying array's length (instead it returns 0). Is this a bug or is there reason which I've simply missed?

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

JS/Model

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>
like image 835
Josh M. Avatar asked Feb 16 '23 15:02

Josh M.


1 Answers

This is because the plain items observable is in fact a Function, which has its own length property to indicate the number of arguments expected.

From MDN's page on Functions (properties section):

length
Specifies the number of arguments expected by the function.

As a developer using the KnockoutJS library I'd also initially expect the length of an observableArray to be the length of the underlying array, but I do appreciate the KO library not overriding this Function property though, as that would probably cause other unwanted side-effects.

like image 66
Jeroen Avatar answered Apr 12 '23 23:04

Jeroen