Javascript 在KnockoutJs中对可观察数组排序时UI未更新

我面临的问题是，当我对可观察数组进行排序时，数组会得到更新，但不会更改UI

代码：

function OrderByOptionModel(field, displayText, isSelected, dispIndex) {
    var self = this;

    self.field = field;
    self.dispText = displayText;
    self.isSelected = ko.observable(isSelected);
    self.dispIndex = dispIndex;

    self.click = function (data) {
        if (data == null) return;
        data.isSelected(!data.isSelected());
    };

    self.getOrderByOptions = function () {
        return [
            new OrderByOptionModel(OrderByTypes.INDUSTRY, 'Industry', false, 1),
            new OrderByOptionModel(OrderByTypes.SUPERSECTOR, 'Super Sector', false, 2),
            new OrderByOptionModel(OrderByTypes.SECTOR, 'Sector', false, 3),
            new OrderByOptionModel(OrderByTypes.SUBSECTOR, 'Sub Sector', false, 4),
            new OrderByOptionModel(OrderByTypes.COUNTRY, 'Country', false, 5),
            new OrderByOptionModel(OrderByTypes.MARKETCAP, 'Market Cap', false, 6),
            new OrderByOptionModel(OrderByTypes.ATOZ, 'A - Z', false, 7),
            new OrderByOptionModel(OrderByTypes.DATETIME, 'Date Time', false, 8)
        ];
    };
    return self;
}

self.orderByOptions = ko.observableArray(OrderByOptionModel().getOrderByOptions());

 self.orderByOptions().sort(function (l, r) {
             return l.dispIndex > r.dispIndex ? 1 : -1;
        });

型号代码：

function OrderByOptionModel(field, displayText, isSelected, dispIndex) {
    var self = this;

    self.field = field;
    self.dispText = displayText;
    self.isSelected = ko.observable(isSelected);
    self.dispIndex = dispIndex;

    self.click = function (data) {
        if (data == null) return;
        data.isSelected(!data.isSelected());
    };

    self.getOrderByOptions = function () {
        return [
            new OrderByOptionModel(OrderByTypes.INDUSTRY, 'Industry', false, 1),
            new OrderByOptionModel(OrderByTypes.SUPERSECTOR, 'Super Sector', false, 2),
            new OrderByOptionModel(OrderByTypes.SECTOR, 'Sector', false, 3),
            new OrderByOptionModel(OrderByTypes.SUBSECTOR, 'Sub Sector', false, 4),
            new OrderByOptionModel(OrderByTypes.COUNTRY, 'Country', false, 5),
            new OrderByOptionModel(OrderByTypes.MARKETCAP, 'Market Cap', false, 6),
            new OrderByOptionModel(OrderByTypes.ATOZ, 'A - Z', false, 7),
            new OrderByOptionModel(OrderByTypes.DATETIME, 'Date Time', false, 8)
        ];
    };
    return self;
}

self.orderByOptions = ko.observableArray(OrderByOptionModel().getOrderByOptions());

 self.orderByOptions().sort(function (l, r) {
             return l.dispIndex > r.dispIndex ? 1 : -1;
        });

可观测阵列：

function OrderByOptionModel(field, displayText, isSelected, dispIndex) {
    var self = this;

    self.field = field;
    self.dispText = displayText;
    self.isSelected = ko.observable(isSelected);
    self.dispIndex = dispIndex;

    self.click = function (data) {
        if (data == null) return;
        data.isSelected(!data.isSelected());
    };

    self.getOrderByOptions = function () {
        return [
            new OrderByOptionModel(OrderByTypes.INDUSTRY, 'Industry', false, 1),
            new OrderByOptionModel(OrderByTypes.SUPERSECTOR, 'Super Sector', false, 2),
            new OrderByOptionModel(OrderByTypes.SECTOR, 'Sector', false, 3),
            new OrderByOptionModel(OrderByTypes.SUBSECTOR, 'Sub Sector', false, 4),
            new OrderByOptionModel(OrderByTypes.COUNTRY, 'Country', false, 5),
            new OrderByOptionModel(OrderByTypes.MARKETCAP, 'Market Cap', false, 6),
            new OrderByOptionModel(OrderByTypes.ATOZ, 'A - Z', false, 7),
            new OrderByOptionModel(OrderByTypes.DATETIME, 'Date Time', false, 8)
        ];
    };
    return self;
}

self.orderByOptions = ko.observableArray(OrderByOptionModel().getOrderByOptions());

 self.orderByOptions().sort(function (l, r) {
             return l.dispIndex > r.dispIndex ? 1 : -1;
        });

排序代码：

function OrderByOptionModel(field, displayText, isSelected, dispIndex) {
    var self = this;

    self.field = field;
    self.dispText = displayText;
    self.isSelected = ko.observable(isSelected);
    self.dispIndex = dispIndex;

    self.click = function (data) {
        if (data == null) return;
        data.isSelected(!data.isSelected());
    };

    self.getOrderByOptions = function () {
        return [
            new OrderByOptionModel(OrderByTypes.INDUSTRY, 'Industry', false, 1),
            new OrderByOptionModel(OrderByTypes.SUPERSECTOR, 'Super Sector', false, 2),
            new OrderByOptionModel(OrderByTypes.SECTOR, 'Sector', false, 3),
            new OrderByOptionModel(OrderByTypes.SUBSECTOR, 'Sub Sector', false, 4),
            new OrderByOptionModel(OrderByTypes.COUNTRY, 'Country', false, 5),
            new OrderByOptionModel(OrderByTypes.MARKETCAP, 'Market Cap', false, 6),
            new OrderByOptionModel(OrderByTypes.ATOZ, 'A - Z', false, 7),
            new OrderByOptionModel(OrderByTypes.DATETIME, 'Date Time', false, 8)
        ];
    };
    return self;
}

self.orderByOptions = ko.observableArray(OrderByOptionModel().getOrderByOptions());

 self.orderByOptions().sort(function (l, r) {
             return l.dispIndex > r.dispIndex ? 1 : -1;
        });

---

但是UI没有更新我不知道问题出在哪里？

删除ObservalArray作业中的括号

self.orderByOptions = ko.observableArray(OrderByOptionModel().getOrderByOptions);

---

knockout的问题是，当将对象绑定到可观察对象时，它会代表您调用函数。有时，只需删除返回数据的函数的括号并绑定到函数本身即可修复它。

如果在开始时使

self.orderByOptions

可见，则根本不需要将其分配给

ko.observearray（..）

。然后您所要做的就是

self.orderByOptions（OrderByOptionModel（）.getOrderByOptions）。