JSFiddle - React, Tailwind, and code Playground

by MikeAski

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.6.js"></script>
Problem: How do I update an Ember.ArrayProxy in a way that Ember notifications fire to update the view?

<script type="text/x-handlebars">
  <ol>
    <li>
      Here is a list of items
      {{view Ember.CollectionView contentBinding="App.items" itemViewClass="App.ItemView" tagName="ul"}}
    </li>
    
    <li>
      Click this button to update the array
      {{#view Ember.Button action="sortByCity" target="App.items"}}
        Sort by City
      {{/view}}
    </li>

    <li>
        We expect the list to update and this to update too. <br>
        BUT it does not!!!<br>
        The first person is "{{App.items.firstObject.name}}" (why does this not update?)
    </li>

    <li>
        We test that the list actually was updated    
        {{#view Ember.Button action="alertFirstName" target="App.items"}}
          Show First Item's Name
        {{/view}}
    </li>
  </ol>
</script>

<script type="text/x-handlebars" data-template-name="item-view">
    {{content.name}} - {{content.city}}
</script>

JavaScript

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

App.items = Ember.ArrayProxy.create({
    content: [
        Ember.Object.create({ name: 'Me', city: 'new york'}),
        Ember.Object.create({ name: 'You', city: 'boston'})
    ],
    sortByCity: function() { 
       var sorted = this.get('content').sort(function(a,b) {
        return a.get('city') > b.get('city')
      });
      this.replaceContent(0, sorted.get('length'), sorted);   
    },
    alertFirstName: function() {
      alert("The first item's name is " + this.get('firstObject').get('name'))
    }
});

App.ItemsView = Ember.CollectionView.extend({
    contentBinding: 'App.items',
    itemViewClass: 'App.ItemView',
    tagName: 'ul'
});

App.ItemView = Ember.View.extend({
    templateName: 'item-view',
    tagName: 'li'
});