0

我有一个 observableArray 项目,我映射到一个复选框列表。他们一开始都没有被点击。但是当一个特定的项目被选中时,我想要一组复选框被选中。

我的视图模型:

       function ModelView(data) {
            var self = this;

            self.Items= ko.observableArray(data.Items);
            self.ItemOptions = ko.observableArray(data.ItemOptions ); 

            self.PreSelectOptions = function(item){
                ko.utils.arrayForEach(self.ItemOptions(), function (itemoption) {
                var selected = false;
                //Loop through the options the item has and preselect the checkboxes
                for (var i = 0; i < item.Option.length; i++) {
                    if (itemoption.ID == item.Option[x]) {
                        selected = true;
                        break;
                    }
                }

                itemoption.chosen = selected;//Check the checkbox
            }); 


       }

html片段:

       <ul data-bind="foreach: channels">
          <li>
              <input type="checkbox" data-bind='checked: chosen' /><span data-bind="text: ChannelName"></span></li>
       </ul>

我已经逐步完成了代码,并且 itemoption.chosen 被设置为 true。我必须重新绑定复选框吗?

4

1 回答 1

1

问题是这chosen不是可观察的。绑定到不可观察对象时,绑定不会自动更新。

您可以在设置后使用这样的代码使其成为可观察的self.ItemOptions

ko.utils.arrayForEach(self.ItemOptions(), function (itemoption) {
    itemoption.chosen = ko.observable(itemoption.chosen);
});

但是,由于 self.ItemOptions 是 data.ItemOptions 的浅拷贝,因此数据对象的项选项也将被修改为使用 observable。更好的选择可能是使用ko.mapping插件:

self.ItemOptions = ko.mapping.fromJS(data.ItemOptions);

无论哪种情况,您都需要更改语法以将chosen其作为可观察对象引用:

itemoption.chosen(selected); // Check the checkbox
于 2013-10-07T18:28:42.527 回答