Question

我有一个Knockout可观察数组，拒绝更新.sort()调用后绑定到的UI（一个jquery Accordion），但在.reverse()调用后很高兴地更新了用户界面 - 我几天来我一直在反对这个问题 - 似乎无法找到答案......帮助！

容器视图模型 - 实现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（）后面的observable数组属性上调用了valueHasMutated（）！ - 安德鲁

Answer 1

尝试在排序后调用valueHasMutated函数：

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

Answer 2

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

这样你改变了可观察性。其他方式是更改内部的数组，并没有触发更改。

Knockout.js ObservableArray排序不更新UI

2 个答案: