Knockout.js ObservableArray 排序不更新 UI答案

【问题标题】：Knockout.js ObservableArray sort not updating UIKnockout.js ObservableArray 排序不更新 UI
【发布时间】：2013-11-23 08:17:37
【问题描述】：

我有一个 Knockout 可观察数组，它拒绝更新在 .sort() 调用后绑定到的 UI（一个 jquery Accordion），但在 .reverse() 调用后很高兴更新 UI - 我一直在敲我的几天来一直在解决这个问题 - 似乎找不到答案...帮助！

容器视图模型 - 实现 observableArray 属性：

function DataTextsKOViewModel( jsonTexts  ) {
    var self = this;

    // Texts array 
    self.texts = ko.observableArray();

    // Build from json data array 
    for (var i = 0; i < jsonTexts.AuthorityTexts.length; i++) {
        var jsontext = jsonTexts.AuthorityTexts[i];
        // Push Text VModel objects onto the KO observable array list ..
        self.texts.push(
                new DataTextKOViewModel( jsontext )
           );
    }

}

数组对象模型 - 这些是排序的对象：

// Single data text view model
function DataTextKOViewModel(jsonText) {
    // Other properties omitted for brevity 
    this.ListOrder = ko.observable(jsonText.ListOrder);
}

自定义排序功能：

function textListOrderCompare(l, r) {

// Ascending sort
var retval = ((l.ListOrder() == r.ListOrder()) ? 0 
: ((l.ListOrder() > r.ListOrder()) ? 1 : -1));

return retval;
}

绑定标记：

<!-- ko foreach: texts -->    
<div class="group" data-bind="attr:{'id': clientId() }">   
     <h3 data-bind="attr:{'dataKey': responsibilityId() }">
        <span data-bind="text: responsibilitySectionHeader"></span>
     </h3>    
     <div>
        <!-- section content goes here -->
     </div>
</div>

当用户选择排序时：

myDataTextsKOViewModel.rollbackChanges();
dataTextsViewModel.texts.sort(textListOrderCompare);  
// UI Never updates - but I've checked console output to ensure that the array 
/ /sorts correctly

dataTextsViewModel.texts.sort(textListOrderCompare);  
// UI updates with items in reverse order

您能给我的任何帮助将不胜感激。

编辑：应该提到 - 我已经在 .sort() 之后调用了可观察数组属性上的 valueHasMutated()！ - 安德鲁

【问题讨论】：

标签： sorting knockout.js ko.observablearray

【解决方案1】：

排序后尝试调用valueHasMutated函数：

dataTextsViewModel.texts.sort(textListOrderCompare); 
dataTextsViewModel.texts.valueHasMutated();

【讨论】：

【解决方案2】：

dataTextsViewModel.texts(dataTextsViewModel.texts().sort(textListOrderCompare));

这样你就改变了 observable。另一种方法是更改里面的数组并且没有触发更改。

【讨论】：

对不起 - 我已经按照你的建议添加了 texts 数组的重新分配 - 但 UI 仍然没有更新......