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对象，并且只能绑定一次。

要获得您正在寻找的双向绑定行为，您的对象必须是＆＃34; observables＆＃34;，例如：

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

请注意，您需要确定结构中哪些项目需要是可观察的;它取决于你希望绑定的行为方式。

knockoutjs和复选框检查绑定

1 个答案: