Question

我有淘汰赛的问题，我无法弄清楚。我需要一个简单的过滤器。我的问题是我总是看到self.Vouchers（）的所有项目。过滤器不工作，chekboxes似乎只有单向数据绑定;如果我在脚本中更改了一个值，那就没问题了，但是我无法更改网页上的选中状态。

Viemodel：

function AppViewModel() {
var self = this;

self.FilterVouchersA = ko.observable<boolean>(true);
self.FilterVouchersB = ko.observable<boolean>(false);
self.FilterVouchersC = ko.observable<boolean>(false);

self.Vouchers = ko.observableArray<VoucherModel>();
self.FilteredVouchers = ko.computed(() => {
    var vouchersArray = self.Vouchers();
    return ko.utils.arrayFilter(vouchersArray, (voucher: VoucherModel) =>
    (
        self.FilterVouchersA && voucher.type() == VoucherType.A ||
        self.FilterVouchersB && voucher.type() == VoucherType.B ||
        self.FilterVouchersC && voucher.type() == VoucherType.C
    ));
});
}

ko.applyBindings(new AppViewModel())

剃刀：

<input type="checkbox" data-bind="checked: FilterVouchersA " /> Voucher type A
<input type="checkbox" data-bind="checked: FilterVouchersB " /> Voucher type B
<input type="checkbox" data-bind="checked: FilterVouchersC " /> Voucher type C

<div id="Complications" class="Complications" data-bind="foreach: FilteredVouchers ">
 .... //Not important

Answer 1

我认为你不是正确地对你的逻辑进行分组，尝试添加parens：

return ko.utils.arrayFilter(vouchersArray, (voucher: VoucherModel) =>
(
    (self.FilterVouchersA && voucher.type() == VoucherType.A) ||
    (self.FilterVouchersB && voucher.type() == VoucherType.B) ||
    (self.FilterVouchersC && voucher.type() == VoucherType.C)
)

如果这不起作用，请进入您的过滤器功能并确保它正在执行您想要的操作。其余的都很好。

打字稿淘汰过滤器列表

1 个答案: