knockoutjs 和复选框选中的绑定

Question

我无法让 knockoutjs 检查绑定正常工作。不知道我只是做错了什么还是什么。我有这段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>

我想要一个复选框，允许用户通过单击应该删除文本或将其变灰或其他内容的复选框来标记此列表中的项目。

我的视图模型是通过获取以下 json 数据格式创建的。

{"$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"},

所以问题是选中复选框在这里实际上并没有做任何事情。它应该禁用其他标签，但事实并非如此。我的所有其他值都正确显示，如果我执行 data-bind=text: IsActive 我可以看到应该使用复选框更改的值，但它永远不会改变。

编辑：以下建议：

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) },
                          ])
                      },
                ])
            }
    ]);

Answer 1

您遇到的问题是因为您的数据是一个普通的 JSON 对象，并且只会被绑定一次。

要获得您正在寻找的双向绑定行为，您的对象需要是“可观察的”，例如：

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

请注意，您可以决定结构中的哪些项目需要是可观察的；这将取决于您希望绑定的行为方式。