如何使用knockout.js管理和呈现嵌套数组？

Question

我是Knockout.js的新手,我现在正面临一种情况,我不确定如何正确处理它.问题是:我收到了一堆我正在通过ajax检索的对象.结果有点像这样:

var Objects = [ { id: 0, name: "Foo", type: "A" },
                { id: 1, name: "Bar", type: "B" },
                { id: 1, name: "Bar", type: "A" }, ... ];

到目前为止我所做的(简化):

var ViewModel = function() {
    var self = this;
    self.objects = ko.observableArray(Objects);
};

现在我需要根据它们的"类型"在不同的列表中渲染这些对象.因此,存在"A"类型的对象列表和"B"类型的对象列表(目前有五种类型,但将来可能会添加更多类型).

我想出了这个(工作)解决方案:

var ViewModel = function() {
    var self = this;
    self.objects = ko.observableArray(Objects);

    self.objectsA = ko.computed(function() {
        return ko.utils.arrayFilter(self.objects(), function(item) {
            return (item.type == 'A');
        });
    });

    self.objectsB = ...
    self.objectsC = ...
};

在我的实际观点中:

<h1>Type A</h1>
<ul class="typeA" data-bind="template: { name: 'object', foreach: objectsA }"></ul>

<h1>Type B</h1>
<ul class="typeB" data-bind="template: { name: 'object', foreach: objectsB }"></ul>

有没有更好的方法来解决这个问题？这有效,但它有点难看,不是很动态,包括很多重复.

Answer 1

绑定在a内部执行computed observable.这意味着您可以选择使用一个简单的函数,computed observable如果您愿意,它可以使用参数而不是实际参数.

这意味着您可以将其简化为:

var ViewModel = function() {
    var self = this;
    self.objects = ko.observableArray(Objects);

    self.filterByType = function(type) {
        return ko.utils.arrayFilter(self.objects(), function(item) {
            return (item.type === type);
        });
    };
};

然后,绑定它像:

<h1>Type A</h1>
<ul class="typeA" data-bind="template: { name: 'object', foreach: filterByType('A') }"></ul>

<h1>Type B</h1>
<ul class="typeB" data-bind="template: { name: 'object', foreach: filterByType('B') }"></ul>

无论何时操作数组(添加/删除项目),您的UI都会立即更新.但是,如果您要动态编辑type,则type需要对计算的observable进行更新的观察(以原始方法或以这种方式).

示例:http://jsfiddle.net/rniemeyer/NFbxc/