knockout.js - KnockoutJS ObservableArray 数据分组

Question

KnockoutJS 是否有一个功能，而我可以采取类似的方法:

    var myArray = ko.observableArray([
      { name: "Jimmy", type: "Friend" },
      { name: "George", type: "Friend" },
      { name: "Zippy", type: "Enemy" }
    ]);

然后在“类型”字段上选择 distinct，产生如下所示的结果:

(pseudo code)
    var distinct = myArray.distinct('type')
      // Returns array of two arrays
      //  distinct[0] is an array of type=Friend
      //  distinct[1] is an array of type=Enemy 

我知道 ko.utils.arrayGetDistinctValues，但这并不完全符合我的要求。我也知道我可以使用 ko.utils.arrayGetDistinctValues 编写一些循环来获得我想要的东西，我只是想知道我忽略的 KnockoutJS 中是否还有其他东西。

Answer 1

KO 中没有其他任何东西可以使这变得更容易。

有很多方法可以使这项工作。例如，您可以扩展 observableArrays 以具有 distinct功能。然后，您可以像这样创建 observableArray:

this.people = ko.observableArray([
       new Person("Jimmy", "Friend"),
       new Person("George", "Friend"),
       new Person("Zippy", "Enemy")
]).distinct('type');

distinct函数可能如下所示:

ko.observableArray.fn.distinct = function(prop) {
    var target = this;
    target.index = {};
    target.index[prop] = ko.observable({});    

    ko.computed(function() {
        //rebuild index
        var propIndex = {};

        ko.utils.arrayForEach(target(), function(item) {
            var key = ko.utils.unwrapObservable(item[prop]);
            if (key) {
                propIndex[key] = propIndex[key] || [];
                propIndex[key].push(item);            
            }
        });   

        target.index[prop](propIndex);
    });

    return target;
};    

它支持链接，因此您可以调用 distinct多次使用不同的属性。

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

这确实会在每次更改时重建索引一次，因此如果您有大量项目，那么您可能希望探索其他方式(手动订阅)以从“索引”数组中添加/删除项目。