Question

我想只显示一个可观察数组ko if的子集使用<div class="image-list" data-bind="foreach: arrayData">  viewing only objects with attribute type==0我能够对数据应用过滤器：

type == 1

但是，当我想更改过滤器时，我不知道如何触发更新视图{{1}}

如果可能的话？

P.S：

目前我使用foreach的数据副本，我在模型中清除了结束重置。但是对于这种方法，我需要一个可观察的数组用于模型中的每个过滤器和大量的复制

Answer 1

我建议使用ko.utils.arrayFilter来抓取您想要显示的项目。您需要添加一个observable来保存要过滤的值，然后在＆＃39; arrayFilter＆＃39;中使用它。更改要显示的项目。

//ViewModel code below
var self = this;
self.selectedType = ko.observable(0); //starts at 0, when it changes it will kick off the 'filtered' computed.
self.filtered = ko.computed(function(){
  return ko.utils.arrayFilter(arrayData, function(item) {
        if (item.type() == self.selectedType()){
           return item;
        };
    });
})

这将返回＆＃39; arrayData＆＃39;中的项目列表符合＆＃39; arrayFilter＆＃39;中定义的条件。然后你的foreach数据绑定将绑定到这个计算，而不是直接绑定到arrayData。

<div class="image-list" data-bind="foreach: filtered">

你可以在这里阅读更多关于ko.utils功能的信息（很多其他好东西！）： http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

编辑：感谢connexo指出更新问题的视图部分。在我最初的阅读中完全错过了。

Answer 2

存储您在observable中比较type的值：

self.selectedType = ko.observable（）;

并在viewmodel函数中根据您的需要更新其内容。

然后用它来比较：

<!-- ko if: type == selectedType() -->

如果您可以使用下划线，您也可以将其过滤直接应用于您的foreach绑定：

<div class="image-list" data-bind="foreach: _.filter(arrayData, function() { return type== $root.selectedType() })">

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

=> [2, 4, 6]

http://underscorejs.org/#filter

当可观察数组上的过滤器发生更改时，更新视图

2 个答案: