KnockoutJs 参数化 dependentObservable 数组

Question

我有一个 viewModel 和一个从服务器更新的 observableArray，然后我需要能够为该 observableArray< 的过滤器定义动态数量的 div /em>。

这是一个 Scrum 板示例，想象一下您从服务器收到一系列故事。然后将其添加到 viewModel.stories() observableArray 中。

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

因此，鉴于

item.BoardState 是“Backlog”或“In Progress”，

我想要一个依赖的可观察量，我可以将其参数化为仅显示“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));
    });
});

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

Answer 1

您始终可以将过滤器移出到单独的函数中，并为每个过滤器类型创建一个 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");
});

Answer 2

将参数移至视图模型并使用自定义绑定。所以你不会有任何问题。

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

演示 - 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}">

Answer 3

我会这样写：

View:

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

ViewModel:

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

EDIT: now works as an ko.dependentObservable (ko.compulated in 2.0)