Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
    <button {{action 'add'}}>Add A Person</button>
    Count: {{filtered.length}}
  <ul>
  {{#each filtered}}
      <li>{{firstName}} {{lastName}} <button {{action 'remove' this}}>X</button></li>
  {{/each}}
   </ul>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return [
          {firstName: 'Kris', lastName: 'Selden', isDeleted: false },
          {firstName: 'Luke', lastName: 'Melia', isDeleted: false },
          {firstName: 'Formerly Alex', lastName: 'Matchneer', isDeleted: false }
      ];
  }
});


App.IndexController = Ember.ArrayController.extend({
    itemController: 'person',
    filtered: function () {
        return this.filterBy('isDeleted', false);
    }.property('@each.isDeleted'),
    actions: {
        remove: function (person) {
            Ember.set(person, 'isDeleted', true);
        },
        add: function () {
            this.pushObject({
                firstName: 'Jason',
                lastName: 'Mitchell',
                isDeleted: false
            });
        }
    }
});

App.PersonController = Ember.ObjectController.extend({});