javascript - knockout.js 不对可观察数组进行排序

Question

我这辈子都无法对这个数组进行适当的排序。我知道排序功能有效，但某种排序的时间已关闭。似乎无法弄清楚。

用户界面

 <!-- ko foreach: Times.sort(function (l, r) { app.utils.orderTime(l.Time(), r.Time()); }) -->

Javascript

function Day(date, updated) {

        var self = this;

        self.Times = ko.observableArray([]);

        var times = ko.utils.arrayMap(date.Times, function (item) {
            return new Time(item, updated);
        });

        self.Times.push.apply(self.Times, times);
    }

排序功能

app.utils.orderTime = function(l, r) {  // l = "9:00 AM", r = "11:00 PM"
    var leftFormatted = new Date('1/1/2012 ' + l); // Sun Jan 01 2012 09:00:00 GMT-0700
    var rightFormatted = new Date('1/1/2012 ' + r); // Sun Jan 01 2012 23:00:00 GMT-0700

    return leftFormatted.compareTo(rightFormatted); // -1
};

更新:

我继续添加了一个名为 TimeSorted 的计算并且排序很好，但是我不能将任何东西插入时间数组并更新它，除非我有 self.Times().sort(...相反，但订单不会保留。

        self.TimesSorted = ko.computed(function() {
            return self.Times.sort(function (l, r) { app.utils.orderTime(l.Time(), r.Time()); });
        });

 <!-- ko foreach: TimesSorted -->

Answer 1

sort 方法修改了它所作用的数组，从而改变了原始数组。它也返回那个数组的事实让很多人感到困惑。像这样的绑定(bind)不应该修改数组；它应该使用数组的副本:

<!-- ko foreach: Times.slice(0).sort(...) -->

可观察数组sort方法改变数组(就像push、splice等)并通知订阅者改变。它不会在绑定(bind)或计算可观察对象中创建对数组的依赖。另一方面，slice 方法确实创建了一个依赖项。

如果您真的想对原始数组进行排序，那么这真的不应该在绑定(bind)中完成。我建议您使用这样的扩展器:

ko.extenders.sorted = function (obs, sortFunction) {
    obs.sort(sortFunction);
    obs.subscribe(function (array) {
        array.sort(sortFunction);
    });
}

...

self.Times = ko.observableArray([]).extend({ sorted: function (l, r) { return app.utils.orderTime(l.Time(), r.Time()); } });

示例:http://jsfiddle.net/mbest/f3SX2/