挖空.js和复选框的双向绑定

Knockout.js and twoway binding of checkboxes

本文关键字：绑定 复选框 js 挖空      更新时间：2023-09-26

第一：我是淘汰 js 的新手，并试图围绕淘汰赛/MVVM 的思维方式，所以如果我的问题变得微不足道，请原谅我。

我

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

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

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

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

使用 KNOCKOUT.js 时，您需要将操作减半停止 - 如果您有项目列表，则数据属于视图模型（不仅是选择项目），并且只有外观由视图定义。

因此，我推荐一个 Item 类型的可观察数组items，它具有属性isSelected - 然后可以通过计算的可观察量访问所选项目：

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/

相关文章：