javascript - Knockout JS : Removing selected values from other, 相同的下拉菜单

Question

我正在研究一个问题/答案模型，并且我有多个包含相同数据的下拉菜单(一组答案，如果你愿意的话)。这里的业务逻辑是，一旦有人选择了问题的答案，该答案只能使用一次，并且不能用于其他问题。

因此，我找到了一种将所有下拉列表绑定(bind)到包含我的答案的单个 observableArray 的方法，以便下拉列表都包含相同的选项。我想做的是订阅一个下拉列表(众多下拉列表中的一个)的当前值，并从与其关联的所有其他下拉列表中删除所选值。使用 Knockout，我能够订阅回调函数来处理 View 中不断变化的值。

在我的回调函数中，我发现使用 observableArray 的 remove 方法从 observableArray 中删除答案是有效的，但不幸的是，它从所有下拉列表中删除了当前选定的答案 - 包括选了一个!我尝试使用推送命令将其放回原处，但这也会导致问题。我似乎无法按照我想要的方式隔离更新。

以前有人使用 Knockout 实现过类似的事情吗？任何帮助或建议将不胜感激。

Answer 1

因为您绑定(bind)到一个选项数组，如果您从中删除一个项目，那么选项绑定(bind)将正确地反射(reflect)这一点。您可以使用计算值为每个要绑定(bind)的选择框创建独立的虚拟列表。

var viewModel = function(data) {
   var self = this;
   this.values = ko.observableArray([ "option 1", "option 2", "option 3"]);
   this.selected = [
       new ko.observable(),
       new ko.observable(),
       new ko.observable()
   ]

   this.remaining = function (current) {
       var selected = ko.toJS(self.selected),
           currentValue = ko.utils.unwrapObservable(current);
       var result = ko.utils.arrayFilter(self.values(), function (option) {
           return option == currentValue || selected.indexOf(option) === -1;
       });
       return result;            
   };

   this.values1 = ko.computed(function () {
      return self.remaining(self.selected[0]);
   });
   this.values2 = ko.computed(function () {
      return self.remaining(self.selected[1]);
   });
   this.values3 = ko.computed(function () {
      return self.remaining(self.selected[2]);
   });
};

ko.applyBindings(new viewModel());

http://jsfiddle.net/madcapnmckay/6uWEu/2/

编辑

以上是如何工作的。您需要将每个选择绑定(bind)到它自己的可观察值，以便当您在第一个选择中选择一个值时，可以更新其他值。如果您只是简单地绑定(bind)到同一个列表并在每次选择一个值时从中删除，那么您也会删除刚刚选择的值，KO 会相应地更新选择元素，这将完全被破坏。

上面的代码通过依次过滤每个来解决这个问题。我将每个下拉菜单重定向到其自己的计算可观察值。这些计算的可观察量只是调用一个过滤函数，该函数循环遍历值数组并过滤掉任何已选择的不是当前选定值的值。

因此，如果我们从所有未选择的情况开始，第一个选择将获得“选项 1”选择的值 1、值 2 和值 3 计算将由 KO 自动重新计算。以values1为例，它会调用

self.remaining("option 1");

values2 *values3 也会调用剩余的，但未定义，因为它们尚未被选择。

self.remaining(null);

值数组被过滤为尚未选择且不是当前值的选项。因此，第一次调用剩余将导致[“option 1”，“option 2”，“option 3”]。第二次和第三次调用剩余将导致[“option 2”,“option 3”]。

如果取消选择第一个选择，则会执行相同的操作并返回所有选项。

希望这有帮助。