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

Question

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

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

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

以前有人使用 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 也将调用 remaining 但未定义，因为它们尚未被选择。

self.remaining(null);

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

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

希望这对您有所帮助。