ember.js - emberjs arraycontrollerでfacebookのtwitterのようにストリームビューをレンダリングする方法は?

Question

emberjs を使用して配列のコンテンツをレンダリングするには、通常、次のようにします。

<ul>
  {{#each controller}}
    <li>{{name}} by {{artist}}</li>
  {{/each}}
</ul>

ストリーム リストの一番上に新しいストリームが追加される (Facebook の) Twitter のようなライブ ストリーム ビューを作成するにはどうすればよいですか?

Answer 1

コントローラーでは、sortPropertiessee hereを設定して配列をソートするプロパティを指定し、配列をソートsortAscendingする方向を指定する (ブール値) を設定できます。

配列を変更すると、ビューは自動的に更新されます。

このフィドルを参照してください：http://jsfiddle.net/ZnMFK/2/

またはこのフィドル：http://jsfiddle.net/KfzFE/配列が変更されたときにDOMが更新されることを示します。

HTML:

<script type="text/x-handlebars" data-template-name="index">
  <div class="patient-view extended">
    {{#each controller}}
    <p>Name: {{name}}</p>
    {{/each}}    
  </div>
</script>

アプリ：

window.App = Em.Application.create();

App.Patient = Em.Object.extend({
  order: undefined,
  name: undefined
});

App.IndexView = Em.View.extend({
  click: function() {
    this.get('controller')
        .set('sortAscending', !this.get('controller').get('sortAscending'));
  }
});


App.IndexController = Em.ArrayController.extend({
  sortProperties: ['order'],
  sortAscending: false
});

App.IndexRoute = Em.Route.extend({
  model: function() {
    return Em.A([App.Patient.create({
      name: "Bert",
      order: 2
    }), App.Patient.create({
      name: "Ernie",
      order: 1
    })]);        
  }
});