在 KnockoutJS 中过滤 observableArray答案

【问题标题】：Filter observableArray in KnockoutJS在 KnockoutJS 中过滤 observableArray
【发布时间】：2014-08-12 14:37:24
【问题描述】：

具有以下视图模型（取出一些部分）

function ProjectViewModel() {
    var self = this;
    self.openProjects = ko.observableArray();
    self.currentPhase = ko.observable();  

    self.filteredProjects = ko.computed(function() {
        return ko.utils.arrayFilter(self.openProjects(), function(ProjectModel) {   
            return ProjectModel.phase == self.currentPhase();
        });
    }); 

    self.filter = function (phase) {
            self.currentPhase(phase);
    }   
}

我想要一个项目总数的跨度：

<span data-bind="text: openProjects().length + ' Projects'"></span>

然后我想要每个项目阶段的跨度显示该阶段的项目数量，但我不确定如何传递参数？

<span data-bind="text: filteredProjects().length"></span> // pass on for example 'Starting'

<span data-bind="text: filteredProjects().length"></span> // pass on for example 'Running'

<span data-bind="text: filteredProjects().length"></span> // pass on for example 'Closing'

在self.filteredProjects = ko.computed(function() { 我可以简单地对值进行硬编码并重复该代码三遍，但必须有更好的方法吗？ IE。以某种方式使用参数绑定 self.currentPhase？

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以使用工厂方法来构建ko.computed。

self.filteredProjects = function(phase) {
    // use currentPhase as default
    var filterPhase = phase || self.currentPhase();

    return ko.computed(function() {
        return ko.utils.arrayFilter(self.openProjects(), function(ProjectModel) {   
            return ProjectModel.phase == filterPhase;
        });
    });
};

此绑定使用 currentPhase

<span data-bind="text: filteredProjects()().length"></span>

这些绑定使用'Starting'、'Running'和'Closing'

<span data-bind="text: filteredProjects('Starting')().length"></span>
<span data-bind="text: filteredProjects('Running')().length"></span>
<span data-bind="text: filteredProjects('Closing')().length"></span>

【讨论】：

【解决方案2】：

您的条件可能与此处不匹配

self.filteredProjects = ko.computed(function() {
    return ko.utils.arrayFilter(self.openProjects(), function(ProjectModel) {   
        return ProjectModel.phase == self.currentPhase();
    });
});

试试这样

return ProjectModel.phase() == self.currentPhase();

如果你知道相位是可观察的

【讨论】：