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

Question

我试图让我的 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)
    }));
}

目前您的排序功能区分大小写，我猜您也不希望这样。大写的名字总是浮在非大写的名字之上。

编辑：哎呀，您在可观察对象上使用淘汰赛的 .sort() 而不是数组上的 javascript 排序，因此您可以忽略我答案的第一部分。这可能只是外壳的问题。