ember.js - 如何使用 emberjs arraycontroller 在 facebook 的 twitter 中呈现流视图？

Question

要使用 emberjs 渲染数组的内容，我们通常执行以下操作

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

如何像我们使用 twitter (of facebook) 一样制作实时流视图，在流列表顶部添加一个新流？

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