Why does my non-model backed template persist state when I reload it?

Question

I have a route that loads all my models, and a nested route that allows the user to add a new model.

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

My add template looks like this (very basic)

{{input value=wat}}

Here is the linkTo from my index template

{{#linkTo 'foo.add'}}Add A New Model{{/linkTo}}

When I click the add button I simply create the model using $.ajax and transition back to the list route. All works great, until I click the "add" link again.

When the add route loads up the template from above the 2nd time it still shows the "wat" value I entered previously. I was hoping it would not persist any state as each time I "add" a new model it should be unaware of any previous model data.

How can I achieve this with ember 1.1.2+

Update

The approach I took was to reset each element in the setupController method of the route (as this is invoked each time you load the controller).

App.FooAddRoute = Ember.Route.extend({                           
    model: function(params) {               
        var parentId = 1;                               
        return Ember.Object.create({'bar': parentId});                     
    },                                                                    
    setupController: function(controller, model) {                        
        this._super(controller, model);                                   
        controller.set('bazz', '');                                   
    }
});

Kingpin2k Kingpin2k · Accepted Answer · 2013-11-10T18:18:57

The quick and dirty answer is you want to use a model on the route. If you didn't, you'd have to manually blank out the values on the controller. Ember builds up singleton controllers. This generally is super convenient and very performant.

Singleton controllers keep state. The best way to keep them stateless is to have them backed by a model (return an empty object from the model hook, and don't have the values defined on the controller). By returning something from the model hook it will use an ObjectController (or you'll need to update your code to use an ObjectController on your controller). Then all values will be proxied to the model instead of being stored on the controller.

http://emberjs.jsbin.com/OPaguRU/1/edit

Why does my non-model backed template persist state when I reload it?

1 Answers