Knockout.js 和复选框的双向绑定

Question

首先：我是 knout js 的新手，并试图围绕 knockout/mvvm 的思维方式进行思考，所以如果我的问题被证明是微不足道的，请原谅我。

我有以下情况：我有一个淘汰视图模型，其中包含一个 observableArray 所选票证对象。该数组表示更大票证集合的用户定义选择/子集。整套票都列在一个 jqgrid 表中，每一行都有一个复选框，应该告诉每个票是否被选中。这意味着只要“selectedTickets”数组发生变化，就需要更新复选框的值。除此之外，我还希望用户能够单击每个复选框，以便从选择中添加/删除票证。这似乎是一个相当可接受的功能，对吧？

但是，我确实无法看到如何使用淘汰赛“检查”绑定来实现这一目标。我的第一个想法是在名为“isSelected”的视图模型对象上使用计算/依赖的 observable，它会反映 selectedTickets 数组中的变化，并根据票证是否在 selectedTickets 数组中返回 true 或 false。这里的第一个问题是，我需要将一个参数传递给计算的 observable，说明它应该查找哪个票证 ID，并且据我所知，它只适用于可写的计算 observable。然而，获取复选框的状态似乎不像是一个写操作，所以已经开始闻起来了。下一个问题是绑定需要是双向的，因为我希望用户能够更改每个复选框的状态并相应地更新 selectedTickets 数组。这是一个不同的操作，因为它实际上会删除/添加票到 selectedTickets 数组。这将再次触发计算的 observable 尝试设置复选框的状态。如果我尝试这样做，似乎这两个用例最终可能会像无限循环一样结束。我还没有找到一种结合这两个用例的好方法，只使用复选框的选中绑定。

我当然可以手动对复选框进行事件处理，方法是将侦听器连接到复选框上的更改事件和剔除视图模型中的 selectedTickets 数组，但我希望通过剔除绑定可以更加自动化.

希望有一些淘汰赛高手可以指导我走上一条好的道路，因为我觉得我已经偏离了这个轨道。

Answer 1

在使用knockout.js时，你需要停止做事半途而废——如果你有一个item列表，数据属于viewmodel（不仅仅是select items），只有外观是由view定义的。

因此，我建议使用 Item 类型的 observable 数组 items，它具有属性 isSelected - 然后可以通过计算的 observable 访问所选项目：

var Item = function(name) {
    this.name = ko.observable(name);
    this.isSelected = ko.observable(false);
};

var ViewModel = function() {
    var self = this;

    self.items = ko.observableArray([
        new Item('Foo'), new Item('Bar'), new Item('Foo Bar')
    ]);

    self.selectedItems = ko.computed(function() {
        return ko.utils.arrayFilter(self.items(), function(item) {
            return item.isSelected();
        });
    });
};

http://jsfiddle.net/htZfX/