I have an ember template that loads some JSON data on page load, there are some buttons and when these buttons are clicked I need to make different json calls and update the model.

Everything works fine in this code but the model is not being updated after the action is triggered and the json call is made.

How can I fix it?

App.DatRoute = Ember.Route.extend({ 
    model: function(parms){
        return Em.RSVP.hash({
            datam : Ember.$.getJSON('URL')
        });    
    },
    afterModel: function(){
      $(document).attr('title', 'Title');  
    },
    renderTemplate: function() {
      this.render();
      this.render('fter', { into: 'outlet', outlet: 'fter' });
  },
  actions :{
    action: function(){
        return Em.RSVP.hash({
           datam : Ember.$.getJSON('URL', {data}) 
        });
    }
}
});

Thanks

I have an ember template that loads some JSON data on page load, there are some buttons and when these buttons are clicked I need to make different json calls and update the model.

Everything works fine in this code but the model is not being updated after the action is triggered and the json call is made.

How can I fix it?

App.DatRoute = Ember.Route.extend({ 
    model: function(parms){
        return Em.RSVP.hash({
            datam : Ember.$.getJSON('URL')
        });    
    },
    afterModel: function(){
      $(document).attr('title', 'Title');  
    },
    renderTemplate: function() {
      this.render();
      this.render('fter', { into: 'outlet', outlet: 'fter' });
  },
  actions :{
    action: function(){
        return Em.RSVP.hash({
           datam : Ember.$.getJSON('URL', {data}) 
        });
    }
}
});

Thanks

• javascript
• json
• ember.js

1 Answer 1

Because you're not doing anything that updates the model. Ember does nothing with the return value from an action, be it a promise or otherwise. You need to put the action on the controller and set the model with the data ing back from the ajax call:

action: function() {
    var self = this;
    Ember.$.getJSON('URL', {data})
        .then(function(result) {
            self.set('model', result);
        });
}

or my style, entirely equivalent

action: function() {
    var set = this.set.bind(this, 'model');
    Ember.$.getJSON('URL', {data}).then(set);
}