KnockoutJs 参数化dependentObservable 数组答案

【问题标题】：KnockoutJs paramatized dependentObservable ArrayKnockoutJs 参数化dependentObservable 数组
【发布时间】：2012-02-01 19:28:10
【问题描述】：

我有一个 viewModel 和一个从服务器更新的 observableArray，然后我需要能够为该 observableArray.

这是一个 Scrum 板示例，因此假设您从服务器收到一系列故事。然后你添加到 viewModel.stories() observableArray.

我想为可观察数组中每个故事的属性的各种不同值设置模板绑定过滤器。

给定

item.BoardState 为“Backlog”或“In Progress”

我想要一个依赖的可观察对象，我可以将其参数化以仅显示“进行中”的故事

    self.filterInProgress = ko.dependentObservable(function (filterParameter) {
    return ko.utils.arrayFilter(self.stories(), function (item) {
        console.log("Current Filter = " + filterParameter + "--- Current BoardState = " + item.BoardState);
        return ((item.BoardState === filterParameter));
    });
});

不幸的是，它说它不起作用。任何建议都非常感谢。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

您总是可以将过滤器移到一个单独的函数中，并为每个 filterType 创建一个dependentObservable：

function filterStories(stories, filterParameter) {
    return ko.utils.arrayFilter(stories, function (item) {
        console.log("Current Filter = " + filterParameter + "--- Current BoardState = " + item.BoardState);
        return ((item.BoardState === filterParameter));
    });
}

self.filterInProgress = ko.dependentObservale(function() {
    return filterStories(self.stories(), "InProgress");
});

self.filterBacklog = ko.dependentObservale(function() {
    return filterStories(self.stories(), "Backlog");
});

【讨论】：

要记住的一点是绑定是在dependentObservables 中执行的，所以如果您不想在视图模型中创建许多这些过滤的dependentObserables，那么您实际上可以像这样绑定它：data-bind="foreach: filteredStories('InProgress')" 并且它会在 observableArray 发生变化时更新（在这种情况下，filteredStories 就像您的 filterStories 但假定 self.stories() 作为数组。只是在膨胀视图模型和添加之间保持平衡的另一种选择模板中有很多逻辑。会做一个 jsFiddle，但现在似乎太慢了
另一种选择是创建单个dependentObservable，它是故事的映射版本。这将是一个像{ InProgress: [...], Backlog: [...] } 这样的对象。然后，您可以像data-bind="foreach: mappedStories().InProgress" 那样绑定，或者如果您正在循环选择像data-bind="foreach: mappedStories()[key]" 这样的选项。这样做的好处是，当数组更改时，只有一次通过stories，而不是每个过滤器都通过。不过，在小型应用程序中可能不会有太大影响。

【解决方案2】：

将参数移动到 View-Model 并使用自定义绑定。所以你不会有问题的。

寻找这个前段时间我和我的大学讨论这个问题时诞生的例子。

演示 - http://jsbin.com/epojol/5

预览代码 - http://jsbin.com/epojol/5/edit#javascript,html,live

来自演示的自定义绑定：

ko.bindingHandlers.rangeVisible = {
            update: function (element, valueAccessor, allBindings) {
                var selectedValue = ko.utils.unwrapObservable(valueAccessor());
                var itemRange = allBindings().range;

                if (selectedValue < itemRange.max && selectedValue >= itemRange.min)
                    $(element).show("slow");
                else
                    $(element).hide("slow");
            }
        };

在 html 中绑定：

<div class="plan red" data-bind="rangeVisible: selected, range: {min: 0, max:10}">

【讨论】：

【解决方案3】：

我会这样写：

查看：

<div data-bind="foreach: filterInProgress">
    <h1 data-bind="text: Id"></h1>
</div>

视图模型：

var viewModel = {

    stories: ko.observableArray(
        [
            {
                'Id': 0,
                'BoardState': 'In Progress'
            },
            {
                'Id': 1,
                'BoardState': 'Backlog'
            },
            {
                'Id': 2,
                'BoardState': 'In Progress'
            }            
        ]
    )
};

viewModel.filterInProgress = ko.computed(
    function() {
        return ko.utils.arrayFilter(viewModel.stories(), function(item) {
            return item.BoardState == 'In Progress';
        });
    }
)

ko.applyBindings(viewModel);

编辑：现在作为 ko.dependentObservable（ko.computed 在 2.0 中）

【讨论】：