observableArray를 추가 된 아이템으로 분류하기 JS

Question

"sort"를 클릭했을 때 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

정렬 함수는 전달 된 배열에서 작동하지 않지만 배열의 새 정렬 된 버전을 반환합니다. 따라서 관찰 결과를 정렬 된 결과로 업데이트하려면 내용을 정렬 결과로 설정해야합니다.

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) 
    })); 
} 

현재 정렬 기능은 대소 문자를 구별합니다. 나는 그 중 하나도 원하지 않는다고 생각합니다. 대문자로 된 이름은 대문자가 아닌 이름 위에 항상 올 수 있습니다.

편집 : 너는 내 대답의 첫 부분을 무시할 수 있도록 obserptable에서 자바 스크립트가 아닌 정렬에 knockout의 .sort()를 사용하고있다. 아마 케이싱 일뿐입니다.