How to redirect to a template reloading the page content from a JSON request in Ember

0
votes

I'd like to transition to a template but reloading the page content through a JSON request.

In other words, I load initially my index template through a getJSON request and then I go to another template where I modify some data. Later, I'd like to return to my initial template through an action handler with the the same getJSON request (it'll return another data different from the first one).

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return $.getJSON("myurl");
    },
    actions: {
        goto: function(){
            $.getJSON("myurl");
            this.transitionTo('index');
        }
    }
});

I'm able to transition to my template and to do a new JSON request but the data I see is the initial one. This only works if I click F5 because ember renders the template with the first getJSON call from model function.

EDIT:

I've reached a solution but I'd like to know if there is another better one without reloading the page.

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return $.getJSON("myurl");
    },
    actions: {
        goto: function(){
            this.transitionTo('index').then(function(){location.reload(true)});
        }
    }
});

Thanks in advanced!

2
jsonember.jsgetjsonember-router

2 Answers

0
votes

Can you test this?

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return $.getJSON("myurl");
    },
    actions: {
        goto: function(){
            var newModel = $.getJSON("myurl"),
            that = this;
            newModel.then(function(model){
                that.transitionTo('index',model);
            });
        }
    }
});
0
votes

Maybe you can take the controller and set the model manually, in the then function this.controllerFor('index').set('model',model)

This is close to the right answer.

Ember will cancel a transition if the route is already rendered to the display, so your 

this.transitionTo('index');

isn't actually firing. That's where your problem is stemming from. (It might be worthwhile to turn on ember debug for your app to output state transitions to the console, which will show that this is being terminated).

If you do want to modify the model while within a route, I would do so within the action handler of that route's controller directly:

App.IndexController = Ember.ObjectController.extend({
    actions: {
        goto: function(){
            this.set('model', $.getJSON('myurl'));
        }
    }
});