Where is the editing of TodoMVC Ember getting saved?

Question

I'm having trouble figuring out where the edit is being saved. It looks like when we make an edit, the edit is going directly into the Local Storage, and saved immediately. But the view's change method has no save() anywhere. Do you know how this magic is getting done?

change: function () {
    var value = this.get('value');

    if (Ember.isEmpty(value)) {
        this.get('controller').removeTodo();
    }
},

I'm looking at the source directly in the chrome source viewing.

Answer 1

It's done in this line: https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/emberjs/js/models/todo.js#L10

Todo model

Todos.Todo = DS.Model.extend({
  title: DS.attr('string'),
  isCompleted: DS.attr('boolean'),

  todoDidChange: function () {
    Ember.run.once(this, function () {
      this.get('store').commit();
    });
  }.observes('isCompleted', 'title')
});

Basically what happens is that the proper Todo model has an observer setup which fires the function todoDidChange when eighter the isCompleted or the title property of the model changes. Inside that function this.get('store').commit() is called which saves the changes to your local storage.

Hope it helps.