Question

我点击＆＃34;排序＆＃34;时，我试图通过在列表中添加新项目来按字母顺序对我的observableArray进行排序。谁能说清楚我在这里做错了什么？

谢谢，

杰森

........................

https://jsfiddle.net/jaloomis111/tssLxbo0/

<input data-bind="value: inputName, valueUpdate: 'afterkeydown'" type="text"/>
<ul data-bind="foreach: myFamily"/>
    <li data-bind="text: name"></li>
</ul>
<button data-bind="click: addItem">add item</button>
<button data-bind="click: sortArray">sort array</button>

$(function(){

var data = [
    {name: 'Jason'}, 
    {name: 'Alexi'},
    {name: 'Gabi'}
]; 


viewModel = {
        inputName: ko.observable(""),
    myFamily : ko.observableArray(data),
    //addItem : function(){
      //this.myFamily.push({name: this.inputName()});
      //this.inputName("");
    //},
    addItem : function() {
            this.myFamily.push({name: this.inputName()});
    },

    removeItem : function(){
        this.myFamily.pop();
    },

    sortArray : function(){
       this.myFamily.sort(function (left, right) { 
            return left.name == right.name ? 0 : (left.name < right.name ? -1 : 1) 
       })
    },

};

    ko.applyBindings(viewModel);

});

Answer 1

sort函数不对传递它的数组进行操作，而是返回数组的新排序版本。因此，要使用排序结果更新您的observable，您需要将其内容设置为排序结果。

sortArray : function(){
    this.myFamily(this.myFamily().sort(function (left, right) { 
        return left.name.toLowerCase() == right.name.toLowerCase() ? 0 : (left.name.toLowerCase() < right.name.toLowerCase() ? -1 : 1)
    }));
}

目前，您的排序功能区分大小写，我猜你也不想要它。大写字母总是浮动在非大写字母之上。

编辑：哎呀，你对阵列上的observable而不是javascript的排序使用了淘汰赛的.sort（），所以你可以忽略我答案的第一部分。它可能只是外壳的事情。

使用添加的项目Knockout JS对observableArray进行排序

1 个答案: