Question

I’m learning about Knockout.js and I’ve a question regarding updating nested data, is what I am doing possible or do I need to rethink my model?

Here’s the data in the View Model:

this.menu = ko.observableArray([
    {text: "one",
        children: [{text: "child 1.1", checked: true},{text: "child 1.2", checked: false}]},
    {text: "two",
        children: [{text: "child 2.1", checked: false},{text: "child 2.2", checked: true}]},
    {text: "three",
        children: [{text: "child 3.1", checked: false}]}
]);

Here’s the fiddle:

http://jsfiddle.net/4aqrg/1/

The data is written out at the end so we can see the state of it.

I’m wanting the checked value to be updated when the checkbox is changed in the HTML view, this isn’t happening though. Of the back of the change in state I’d like to take some action. In this case the action will be to display a data series in the graph (still to do that part).

Thanks in advance,
Matt

Answer 1

The problem in your example is that you made the array observable, but the individual properties are not observable.

You need to make each “checked” property ko.observable in order for it to update.

Like this:

this.menu = ko.observableArray([
        {text: "one",
            children: [{text: "child 1.1", checked: ko.observable(true)},{text: "child 1.2", checked: ko.observable(false)}]},
        {text: "two",
            children: [{text: "child 2.1", checked: ko.observable(false)},{text: "child 2.2", checked: ko.observable(true)}]},
        {text: "three",
            children: [{text: "child 3.1", checked: ko.observable(false)}]}
    ]);

If you want the text to also be observable, you’d have to wrap that as well: ko.observable(“child 1.1”)