2012-05-08 5 views
8

私はEmber.ArrayControllerに未分類の内容があります。ArrayControllerの内容を並べ替え

新しいプロパティを使用せずにArrayControllerの内容を並べ替えることができるかどうかを知りたいと思います。

私はもちろん、新しいプロパティを作成でき

App.MyArrayController = Em.ArrayController.extend({ 
    mySortMethod: function(obj1, obj2) { 
    // some code here 
    }, 
    updateSortedContent: function() { 
    var content = this.get('content'); 
    if (content) { 
     var sortedContent = content.copy(); 
     sortedContent.sort(this.mySortMethod); 
     this.set('sortedContent', sortedContent); 
    } 
    }.observes('content') 
}); 

をしかし、私は、コンテンツを複製しません良い方法があると思います。

+0

可能[プロパティによってEmberJSオブジェクトのソート配列(http://stackoverflow.com/questions/9041505/sort-array-of-emberjs-objects-by-property) –

答えて

35

UPDATE

Emberの最新バージョンには実際にソートが組み込まれています。sortProperties(配列)、場合によってはsortAscending(ブール値)を指定した場合には、Ember.SortableMixinが含まれます。ArrayControllerが含まれます。

注:ソートされたバージョンを取得するには、新しいSortableMixinを使用して、さらにarrangedContentを参照する必要があります。モデル自体はそのまま残されます。 (ジョナサン・トランのおかげで)

App.userController = Ember.ArrayController.create({ 
    content: [], 
    sortProperties: ['age'], 
    sortAscending: false 
}) 

ORIGINAL ANSWER

これを行うための正しい方法はArrayProxyのarrangedContentプロパティを使用することです。このプロパティは、コンテンツ配列のソートまたはフィルタ処理されたバージョンを提供するためにオーバーライドされるように設計されています。

App.userController = Ember.ArrayController.create({ 
    content: [], 
    sort: "desc", 
    arrangedContent: Ember.computed("content", function() { 
    var content, sortedContent; 
    content = this.get("content"); 
    if (content) { 
     if (this.get("sort") === "desc") { 
     this.set("sort", "asc"); 
     sortedContent = content.sort(function(a, b) { 
      return a.get("age") - b.get("age"); 
     }); 
     } else { 
     this.set("sort", "desc"); 
     sortedContent = content.sort(function(a, b) { 
      return b.get("age") - a.get("age"); 
     }); 
     } 
     return sortedContent; 
    } else { 
     return null; 
    } 
    }).cacheable() 
}); 
+0

sortPropertyの定義はデフォルトでソートされます。ユーザーのリクエストが登録されているとき(ドロップダウンなど)にソートを適応させるように変更できますか? – Rajat

+0

既定の並べ替えのプロパティを定義し、昇順になるコンテンツは、コンテンツに対して「通常」のものになります。次に、ボタンやドロップダウンを使ってこれら2つのプロパティを変更し、魔法が起こる少しのアクションを行います。私はボタンを引数として送信するソートプロパティ(私は1つだけ使用)を設定するコントローラのreSortメソッドを持っています。プロパティがすでに設定されているプロパティと同じ場合、そのプロパティを降順に逆順にする指示として解釈します。 https://gist.github.com/3744939 –

+8

注:新しいSortableMixinでは、並べ替えられたバージョンを取得するために 'arrangedContent'を参照する必要があります。これが最初に私を立ち上げた。 –

2

アレイコントローラーの内容を含むアレイをEmberに手動で並べ替える必要があります。両方の配列を保持する代わりに、contentをソートされた配列に置き換えることができます。 http://jsfiddle.net/ud3323/yjs8D/新しいビューコンテキストの変更を使用するには、この例を更新しました

更新#2

:ここ

更新

は、私はあなたが探していると思うものの一例です。 https://gist.github.com/2494968

ハンドルバー

<script type="text/x-handlebars" > 
Will Display and Sort by Age (after 2 sec)<br/><br/> 

{{#each App.userController}} 
    {{#view App.RecordView}} 
     {{name}} - {{age}} 
    {{/view}} 
{{/each}} 
</script> 

はJavaScript

App = Ember.Application.create({ 
    ready: function() { 
     Ember.run.later(this, function() { 
      Ember.run.later(this, function() { 
       App.get('userController').set('content', [ 
        Ember.Object.create({ name:"Jeff", age:24 }), 
        Ember.Object.create({ name:"Sue", age:32 }), 
        Ember.Object.create({ name:"Jim", age:12 }) 
       ]); 
     }, 2000); 
     Ember.run.later(this, function() { 
      // Make the controller's content sort again in reverse this time 
      App.userController.notifyPropertyChange('content'); 
     }, 4000); 
    } 
}); 

App.userController = Ember.ArrayController.create({ 
    content: [], 

    contentDidChange: Ember.observer(function(userCtr, prop) { 
     if(!Ember.empty(this.get('content'))) { 
      console.log('about to begin sort'); 
      this.sortContent(); 
     } 

     this._super(); 
    }, 'content'), 

    sort:"desc", 

    sortContent:function() { 
     var content = this.get("content"), sortedContent; 

     if (this.get("sort") == "desc") { 
      this.set("sort", "asc"); 
      sortedContent = content.sort(function(a,b){ 
       return a.get("age") - b.get("age"); 
      }); 
     } else { 
      this.set("sort","desc"); 
      sortedContent = content.sort(function(a,b){ 
       return b.get("age") - a.get("age"); 
      }); 
     } 

     this.set("content",sortedContent); 
    } 
}); 

App.RecordView = Ember.View.extend({}); 

+0

YEPの複製、私「コンテンツ」オブザーバがコンテンツを置き換えると、コールバックが再び送信され、再び、そして再び、... – louiscoquio

+0

私の更新を見てください。それはその問題を解決します。 –

+0

それは動作します!私はすでにそれを試みましたが、コンテンツをソートする前に 'this._super()'と呼ばれました。とにかく、ありがとうございます – louiscoquio

関連する問題