有条件地过滤Knockout observeablearray

时间:2017-03-20 01:55:41

标签: knockout.js

我有一个订单列表,它将显示完整或已过滤的项目下拉列表,具体取决于我的视图模型中的取消属性是否为真。我在这里遇到了一个问题,因为现在我的选项列表只有在我的条件适用于所有订单时才会被过滤。我需要取消属性的​​值来转移到模态,但似乎默认为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;
        }
    };
}

1 个答案:

答案 0 :(得分:0)

Knockout可观察值将充当函数。这是你从中分配和获取值的方法。

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());
  }
};