html - knockoutjs 和复选框勾选绑定(bind)

Question

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

我想要一个复选框，允许用户通过单击复选框来标记此列表中的元素，该复选框应该删除文本或将其灰显或其他东西。

我的 View 模型是通过获取以下 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 对象，并且只会绑定(bind)一次。

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

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

请注意，由您决定结构中的哪些元素需要是可观察的；这将取决于您希望绑定(bind)的行为方式。