Question

To render a content of an array with emberjs we usually do the following

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

How to make a live stream view like we have with twitter (of facebook) where a new stream is added on the top of the streams list ?

Answer 1

On the controller you can set the sortProperties see here to specify on which property the array should be sorted and you can set sortAscending (which is a boolean) to specify which direction the array should be sorted.

When you change the array the view will automatically update.

see this fiddle: http://jsfiddle.net/ZnMFK/2/

or this fiddle: http://jsfiddle.net/KfzFE/ to show the DOM gets updated when the array is changed.

HTML:

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

App:

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