JSFiddle - React, Tailwind, and code Playground

by alexrothenberg

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
      {{#each App.items tagName="ul"}}
          {{#view Ember.View contentBinding="this" tagName="li"}}
              {{content.name}} - {{content.city}}
          {{/view}}
      {{/each}}
    </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>

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() { 
      this.set('content', this.get('content').sort(function(a,b) {
        return a.get('city') > b.get('city')
      }));   
    },
    alertFirstName: function() {
      alert("The first item's name is " + this.get('firstObject').get('name'))
    }
                                                   
});