Question

我有一个带有 observableArray 的 viewModel ，它从服务器更新，然后我需要能够为那些 observableArray

这是一个scrum board示例，所以想象一下你从服务器收到一系列故事。并添加到 viewModel.stories（） observableArray。

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

所以给出

item.BoardState为“Backlog”或“正在进行中”

我想要一个依赖的观察者，我可以将它表示为只显示“正在进行中”的故事

    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

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

Answer 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}">

Answer 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 in 2.0）

KnockoutJs将paramatized dependentObservable Array

3 个答案: