有条件地过滤 Knockout observablearray答案

【问题标题】：Conditionally filter Knockout observeablearray有条件地过滤 Knockout observablearray
【发布时间】：2017-03-20 13:53:28
【问题描述】：

我有一个订单列表，它将显示完整或过滤的项目下拉列表，具体取决于我的视图模型中的 Cancel 属性是否为真。我在这里遇到了问题，因为就目前而言，只有当我的条件对所有订单都为真时，我的选项列表才会被过滤。我需要将取消属性的值转移到模态，但它似乎默认为false。关于我在这里做错了什么有什么想法吗？

这是我的 html 的一部分：

<div class="row" data-bind="foreach: Orders">
        <a data-toggle="modal" href="#Modal" data-bind="click: $parent.SetCurrentOrderInfo($data)">
            <span data-bind="if: $data.Change">Change</span>
            <span data-bind="if: $data.Cancel"> Cancel </span>
        </a></div>

<div class="modal fade" id="Modal" role="dialog" aria-hidden="true">
        <div class="modal-body">
            <p>Type of Request</p>
            <select id="RequestType" class="form-control" data-bind='options: FilteredRequestTypes, optionsText: "Text", value: SelectedRequestType'></select>
        </div>

这是淘汰赛的一部分：

self.Orders = ko.observableArray(OrdersViewModel.Orders);
self.RequestTypes = ko.observableArray(OrdersViewModel.RequestTypes);
self.FilteredRequestTypes = ko.observableArray();
self.CurrentOrderNumber = ko.observable();
self.Cancel = ko.observable();

self.SetCurrentOrderInfo = function (order) {
        self.CurrentOrderNumber = order.OrderNumber;
        self.Cancel = order.Cancel;
        if (order.Cancel) {
            self.FilteredRequestTypes = self.RequestTypes().filter(function (c) {
                return c.ParentKey == "Cancellation";
            });
        }
        else {
            self.FilteredRequestTypes = self.RequestTypes;
        }
    };
}

【问题讨论】：

标签： knockout.js

【解决方案1】：

Knockout observable 值将作为一个函数。这就是您分配和从中获取值的方式。

self.Cancel = ko.observable(false);
// ...
// ...
var isCancelled = self.Cancel(); // to get its value
self.Cancel(true) // to assign new value

所以这就是你需要在 javascript 代码中做的事情：

self.SetCurrentOrderInfo = function (order) {
  self.CurrentOrderNumber(order.OrderNumber);
  self.Cancel(order.Cancel);
  if (self.Cancel()) {
    self.FilteredRequestTypes(self.RequestTypes().filter(function (c) {
      return c.ParentKey === "Cancellation";
    }));
  }
  else {
    self.FilteredRequestTypes(self.RequestTypes());
  }
};

【讨论】：