Rendering a template and invoking model hook in Ember.js

Question

I am using JSON requests to populate the model for a template called example.

App.ExampleRoute = Ember.Route.extend({
  model: function() {
    var url = "example/GetExamples";
    return Ember.$.getJSON(url).then(function(data) {
      return data;
    });
  }
});

The example template perfectly renders this data. Now my backend might change from time to time as I have another template called addExample. It just sends a JSON request to the server to add an entry in the database from this other template. After adding the examples, I try to transition to example template but I see old data only. On refreshing the page, the new data with the added entry comes up.

App.AddController=Ember.Controller.extend({
  postAddRequest: function() {
    var request = $.post("/example/AddExample", {params});
    request.then(this.success.bind(this), this.failure.bind(this));
  },
  success: function(data) {
    this.transitionToRoute('example');
  }
});

So is there any way I can force Ember to re render 'example' template and invoke its model hook in the route without refreshing the page. I can't use ember-data for persistence as it is still in beta stage.

Kingpin2k Kingpin2k · Accepted Answer · 2014-02-03T14:39:22

Transition to the route and send the data you'd like to use on the route. Additionally the route should be using an id/slug in the url. If not see below

this.transitionToRoute('example', data);

If you are already on the route and you want to update the model of a currently set controller you can grab that controller and set the model.

From the controller

App.SomeController = Em.Controller.extend({
  needs: ['example']
  someFunction: function(){
    var model = ... get new model;
    this.get('controllers.example').set('model', model);
  }
});

Rendering a template and invoking model hook in Ember.js

1 Answers

From the controller