更新视图，当可观察到的阵列上的过滤器改变

我想从可观察到的阵列arrayData 使用ko if我能够对数据应用过滤器仅显示一个子集：更新视图，当可观察到的阵列上的过滤器改变

<div class="image-list" data-bind="foreach: arrayData"> 
    <!-- ko if: type == 0 --> 
    viewing only objects with attribute type==0

然而，我不不知道，如何触发更新视图，当我想改变过滤器，例如type == 1

如果有可能？

P.S：

目前我使用的foreach与数据的副本，我清楚到底复位模型。但是，对于这种方法，我需要为模型中的每个过滤器和大量复制的一个可观察阵列

来源

2015-06-30 Valentin Heinitz

我会推荐使用ko.utils.arrayFilter来抓取你想要显示的项目。您需要添加一个observable来保存要过滤的值，然后在'arrayFilter'中使用它来更改要显示的项目。

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

这将返回'arrayData'中与'arrayFilter'中定义的条件相匹配的项目列表。然后你的foreach数据绑定只会绑定到这个计算，而不是直接绑定到arrayData。

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

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

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

来源

2015-06-30 17:17:11

我是如此使用下划线我有时候没有意识到ko有utils太:)。尽管如此，为了使这个正确的答案，你仍然需要涉及另一个observable来比较'type'。 – connexo

是的，我听到你哈哈。他们肯定很容易忘记，因为他们并没有真正记录在主要的Knockout网站上。感谢您指出我错过的要求，我会更新答案以包含该可观察项。 –

非常感谢您的答案和宝贵的链接。无法停止阅读所有文章... –

店与您可观察比较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

来源

2015-06-30 17:10:35 connexo

有趣！感谢您提供下划线示例！ –

更新视图，当可观察到的阵列上的过滤器改变

回答

相关问题