Knockout's foreach wont iterate through an array

Question

I'll start presenting my HTML and View Model:

HTML:

<div data-bind="with: chosenDevice">
    <div class="page-header">
        <h3 data-bind="text: name"></h3>
    </div>

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

    <ul data-bind="foreach: attrs()">
        <li data-bind="text: name"></li>
    </ul>
</div>

The HTML is bound to chosenDevice which is a DeviceViewModel object.

View Model:

function DeviceViewModel(device) {
    var self = this;
    self.name = ko.observable(device.name);
    self.attrs = ko.observableArray([{name: "test1"}, {name: "test2"}, {name: "test3"}]);
}

It is possible print name text: name, and also attrs text: attrs which prints: [object Object],[object Object],[object Object]. When I log the object to the console all the data is present.

But when I try to use foreach: attrs() nothing happens? (I would like a list of test1, test2, test3).

I have simplified the example to make it easier to understand, I can of course post the full version.

Thanks in advance!

Answer 1

Looks like your problem is you're applying bindings to viewModel, so Knockout is throwing on not being able to find chosenDevice referenced in your with: binding.

I tooled around with your code a little here by applying bindings instead to viewModel.devices. Without having the pager dependencies I don't think there's enough information to make a working demo, but with my change I'm not getting any JavaScript errors.