0

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

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

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

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

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

4

1 回答 1

6

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

因此，我推荐一个可观察items的 type数组Item，它具有一个属性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/

于 2012-06-13T10:05:07.897 回答