EmberJS CRUD http://jsfiddle.net snippet

gistfile1.txt

<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  <ul>
  {{#each item in content}}
      <li>{{item.firstName}} <button {{action removeItem item}}>removeItem</button></li>
  {{/each}}
   </ul>
     <button {{action addPerson}}>addPerson</button> | <button {{action reloadPage}}>reload</button> | <button {{action removeLastItem}}>removeLastItem</button>
</script>


-------------

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

App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

App.Person = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string')
});


App.Person.FIXTURES = [
    {id: 1, firstName: "John", lastName: "Doe"},
    {id: 2, firstName: "John2", lastName: "Doe2"}
];


App.Router.map(function() {
    this.route("index",{path:"/"});
  
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    var people=App.Person.find();
    controller.set('content',people);
  }
});

App.IndexController = Ember.Controller.extend({
  addPerson: function() {
     var p = App.Person.createRecord({firstName:"new John",lastName:"Doe"});
  },
  reloadPage: function() {
    this.get('target').transitionTo("index");
  },
    removeItem: function(person) {
        alert("removeItem : " + person);
        person.deleteRecord();
        this.get('target').transitionTo("index");
    },
    
  removeLastItem: function() {
      var aboutToDelete = App.Person.find().objectAt(0);
      aboutToDelete.deleteRecord();
  }
    
    
});