2013-05-24 9 views
5

私は選択リストのためにknockout.jsを使ってソートされたリストを持っていました。私は順序付けられていないリストのためにそれを変換したい。 knockout.jsでリストをソートする方法は?私はエラーがである思っています:。allItems()長さ> 1Knockout.jsソートリスト

http://jsfiddle.net/infatti/Ky5DK/

var BetterListModel = function() { 
    this.allItems = ko.observableArray([ 
     { name: 'Denise' }, 
     { name: 'Charles' }, 
     { name: 'Bert' } 
    ]); // Initial items 

    this.sortItems = function() { 
     this.allItems.sort(); 
    }; 
}; 

ko.applyBindings(new BetterListModel()); 


<button data-bind="click: sortItems, enable: allItems().length > 1">Sort</button> 

答えて

7
this.allItems(this.allItems().sort(function(a, b) { return a.name > b.name;})); 
+0

昇順と降順のソートの回答を編集できますか?私はaとbが混同されていますか? – Ahmed

+0

'a'と 'b'はアプリケーションで使用する変数ではありません。ソート関数は2つの項目をソートするために2つのパラメータを受け取る必要があるため、 :) – dpaul1994

+1

あなたはコードサンプルを説明し、単にコピーとペーストの回答を提供するのではなく、一般に認められています。これは、ここに来た将来のユーザーがこのトピックに関する詳細情報を探すのに役立ちます。 –

4
var BetterListModel = function() { 
    this.allItems = ko.observableArray([ 
    { name: 'Denise' }, 
    { name: 'Charles' }, 
    { name: 'Bert' } 
    ]); // Initial items 

    this.sortItemsAscending = function() { 
     this.allItems(this.allItems().sort(function(a, b) { return a.name > b.name;})); 
    }; 

    this.sortItemsDescending = function() { 
     this.allItems(this.allItems().sort(function(a, b) { return a.name < b.name;})); 
    }; 
}; 

行は次のように説明し weWiliChangeTheArrayToValue(weWilSortTheArrayWithASpecialFunction(ComparatorFunction))

ComparatorFunctionすなわち。

function(a, b) { return a.name < b.name;} 

は、ソート機能をうまく処理するための特別な機能です。
最初の引数が「より大きい」(リストのさらに遠くにある)場合はtrueを返し、最初の引数が小さい場合はfalseを返します。
すべての(ほぼ)ソートアルゴリズムは、2つの要素すべてが順番に並ぶまで並べ替えられたコレクションのあなたは非比較する場合:そうするための最も簡単な方法を<

EDIT 1つのより多くの事を>操作を変更することである - 順序を変更する
は、それが正常にtrueを返すだろうというとき関数がfalseを返すことを確認することによって行われますASCII文字はreturn a.localCompare(b)を使用します。 (及びb.localCompare(A)を返す;)と数字の使用を扱うとき「 - 」歌うので、上記の方法を警告

EDIT2
算術オペレーションの「>」アレイ使用の重複

と壊れる可能性があります
return a.name < b.name ? -1 : a.name > b.name ? 1 : 0; 

代わりに(または単にローカルコンパイル)

+0

これは正解とマークする必要があります。質問に答えて、コードサンプルで何が起こっているのかを説明します。 +1 –