7

我有一个 Knockout 可观察数组，它拒绝在调用后更新它绑定到的 UI（一个 jquery Accordion）.sort()，但在调用后很高兴地更新 UI .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() 之后在可观察数组属性上调用 valueHasMutated() ！- 安德鲁

4

2 回答 2

4

valueHasMutated排序后尝试调用函数：

dataTextsViewModel.texts.sort(textListOrderCompare); 
dataTextsViewModel.texts.valueHasMutated();
于 2013-11-11T13:53:02.820 回答
1 
dataTextsViewModel.texts(dataTextsViewModel.texts().sort(textListOrderCompare));

这样你就改变了可观察的。另一种方法是更改​​内部数组并且没有触发更改。

于 2013-11-11T14:57:54.007 回答