knockoutjs and the checkbox checked binding

Question

I am having trouble getting the knockoutjs checked binding to work properly. Not sure if I'm just doing something wrong or what. I have this piece of html

 <ul data-bind="foreach: ListItems" >
                        <li style="padding-left: 0px; margin-left: 0px; color: white; font-size: 12px;">
                            <div class="title" style="margin-right: 3em; line-height: 20px;">
                                <input type="checkbox" data-bind="checked: IsActive" />

                                <label data-bind="text: Quantity, disable: IsActive"</label>
                                <label data-bind="text: Description, disable: IsActive" ></label>

                            </div>
                        </li>
                    </ul>

Where I want a checkbox that allows users to mark items off this list by clicking the checkbox which should either strikeout the text or grey it out or something.

My view model is created by getting the following json data format.

{"$id":"1","Description":"New List","Categories":
[{"$id":"2","Description":"Bread/Bakery","ListItems":    
[{"$id":"3","IsActive":1,"Description":"Bread","Quantity":"1 Loaf"}]},
{"$id":"4","Description":"Beverages","ListItems":
[{"$id":"5","IsActive":1,"Description":"Coke","Quantity":"1 Case"},

So the problem is that checking the checkbox doesn't actually do anything here. It should be disabling the other labels but it doesn't. All my other values are displayed correctly and if I do a data-bind=text: IsActive I can see the value that should be changing with the checkbox but it never changes.

Edit: following suggestion below:

var mydata = ko.observableArray([
            {
                Categories: ko.observableArray([
                      {
                          Description: "Dairy", ListItems: ko.observableArray([
                          { Description: "Eggs", Quantity: "1 Dz.", IsActive: ko.observable(false) },
                           { Description: "Milk", Quantity: "1 Gallon", IsActive: ko.observable(false) }
                          ])
                      },
                      {
                          Description: "Produce", ListItems: ko.observableArray([
                              { Description: "Lettuce", Quantity: "1 Head", IsActive: ko.observable(false) },
                              { Description: "Oranges", Quantity: "5 ea.", IsActive: ko.observable(false) },
                              { Description: "Greenbeans", Quantity: "1 Thingy", IsActive: ko.observable(false) },
                          ])
                      },
                ])
            }
    ]);

Could you be more specific as to what is the problem? Are the list items being shown properly, and the checkbox not being checked/unchecked or is it something else? — rfernandes
opps. Okay edited and added to the bottom. Can't believe I forgot the most important part. — Matthew The Terrible

rfernandes rfernandes · Accepted Answer · 2014-04-14T04:13:41

The issue you are having is because your data is a plain JSON object and that will get bound only once.

To get the bidirectional binding behaviour you are looking for, your objects need to be "observables", so for example:

var mydata = ko.observable({
    Categories: ko.observableArray([
      { IsActive: ko.observable(true) }
    ])
});

Note that it is up to you to determine which items in your structure need to be observables; it will depend on how you want the bindings to behave.

knockoutjs and the checkbox checked binding

1 Answers