CODEWITHSUNDEEP
javascriptember.js
jackweinbender
jackweinbender

Reputation: 423

Ember two-way data binding on parent breaks on reload

I'm new to Ember. Here's my problem:

I have a list of items that, when an item is clicked, shows the details of the item beside the list. Thus, the title of the item is displayed in the list, in the details, and in an input to make the item title editable.

When I navigate from my main route to the nested, item specific, route, everything works fine: I make a change in the input, the change shows up in the list of items as well as in the details section. However, if I refresh the page---although all of my data comes back (viz. it shows up as expected)---when I make changes in the input it does not update the list title, although the title in the inscription route works updates correctly.

The relevant code is as follows:

App.Router.map(function() {
    this.resource('inscriptions', function(){
        this.resource('inscription', {path:'/:inscription_id'});
      });
});

App.InscriptionsRoute = Ember.Route.extend({
  model: function(){
    return $.getJSON('javascripts/inscriptions.json')
      .then(function(data){
        return data;
      });
  }
});

App.InscriptionRoute = Ember.Route.extend({
  model: function(params){
    return $.getJSON('javascripts/inscriptions.json')
      .then(function(data){
        return data.findBy("id", params.inscription_id);
      });
  }
});

What am I missing?

Upvotes: 1

Views: 127

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

When you're navigating to the item (not refresh) it passes the model via the link-to helper, so it skips the model route. When you refresh it hits each route getting the necessary model. The navigation route is giving you the same instance of the inscription, whereas on refresh you're grabbing a completely different instance.

That being said, you'd want to use the same instance of the inscription in the child route, and avoid making a second call to your server.

App.InscriptionsRoute = Ember.Route.extend({
  model: function(){
    return $.getJSON('javascripts/inscriptions.json')
      .then(function(data){
        return data;
      });
  }
});

App.InscriptionRoute = Ember.Route.extend({
  model: function(params){
    return this.modelFor('inscriptions').findBy("id", params.inscription_id);
  }
});

http://emberjs.com/api/classes/Ember.Route.html#method_modelFor

Upvotes: 1

Related Questions