Ember Data sideloaded properties being dropped on a model

Question

I'm working with

Ember RC3
Ember Data Revision 12
Handlebars RC3

I have Ember Data sideloading relationships on many of my models, so that I can template the sideloaded relationships like so:

// Models
App.Client = DS.Model.extend({
    company: DS.attr('string'),
    accountNumber: DS.attr('string'),
    startDate: DS.attr('mysqlDate'),

    // Relationships
    campaigns: DS.hasMany('App.Campaign'),
    users: DS.hasMany('App.User'),
    phones: DS.hasMany('App.Phone'),
    addresses: DS.hasMany('App.Address')
});

App.User = DS.Model.extend({
    email: DS.attr('string'),
    password: DS.attr('string'),

    // Relationships
    userType: DS.belongsTo('App.UserType'),
    role: DS.belongsTo('App.Role'),
    clients: DS.hasMany('App.Client'),
    phones: DS.hasMany('App.Phone'),
    addresses: DS.hasMany('App.Address')
});

<!-- template -->
<script type="text/x-handlebars" data-template-name="user/index">
  <h2>{{email}}</h2>
  <h5>Clients</h5>
  <ul>
    {{#each client in model.clients}}
      <li>{{client.company}}</li>
    {{/each}}
  </ul>
</script>

This works wonderfully...except for every 1 in 10 reloads or so. Every once in a while the sideloaded relationship (in this case the hasMany relationship model.clients) DOES NOT render to the template while all other model properties (not relationships) DO render to the template. What's weird is that it only does this every once in a while.

I'm not quite sure yet how I can set up a js fiddle for this problem, so I wanted to ask:

Where in the call stack could I set a break point to see what properties will actually get rendered?

I'm using {{debugger}} in the template in question, I'm just not sure where the best place would be to inspect the application state in the call stack.

you could wrap your template with a Ember.View and hook there in "render", there you have a buffer available, is that what you are looking for? I would also update ember.js to rc3 just in case — intuitivepixel
I did upgrade, thanks, but no improvement. It's turning out to be in the model, but debugging in the render hook is an interesting line. Thanks for the suggestion. — ianstarz
and if you are adventurous you could try out this chrome extension (is still in development and not full featured but still useful sometimes) github.com/tildeio/ember-extension have a look — intuitivepixel

ianstarz ianstarz · Accepted Answer · 2013-04-29T02:15:47

So, my problem was two-fold. First Problem: Here's my router map and routes:

App.Router.map(function() {
  this.resource('users', function() {
    this.route('create');
    this.resource('user', { path: ':user_id' }, function() {
      this.route('edit');
      this.route('delete');
    });
  });
});

App.UsersRoute = Ember.Route.extend({
  model: function() {
    return App.User.find();
  }  
});

// Default for this route
App.UserRoute = Ember.Route.extend({
  model: function(params) {
    return App.User.find(params.user_id);
  }
});

Therefore, when navigating to the route 'clients/3' the DS.JSONSerializer would do an extract() for the UserRoute and an extractMany() for the UsersRoute. However, interestingly enough, most of the time extractMany() (for getting a JSON return of all of the users) would occur before extract() for the single user and its sideloaded properties. When this happened the sideloaded properties would indeed render to the template. However, every once in a while extract() would come before extractMany() (it asynchronosly "beat" the extract many), the sideloaded properties would not render. I think this is because if the extract() occured first that model would then be reset when the extractMany() then occurred for all of the models, which when extracting many do not have sideloaded properties.

I fixed this first problem by doing the following:

App.Router.map(function() {
  this.resource('users', function() {
    this.route('create');
  });

  this.resource('user', { path: 'user/:user_id' }, function() {
    this.route('edit');
    this.route('delete');
  });
});

This prevented both models from being extracted in the same route, but the following might have solved both problems.

Second Problem: When navigating away from client/3 to clients and then back to client/3 again, the model would get reset just like the first problem—-sideloaded properties would get dropped.

The way to fix this was to use the UserRoute's activate hook to reload the model.

App.UserRoute = Ember.Route.extend({
  activate: function() {
    this.modelFor('user').reload();
  }
});

This will force the model to be reloaded with the sideloaded properties every time this route 'activates', which is needed of this particular app we're building anyway.

Hope this helps somebody!

Ember Data sideloaded properties being dropped on a model

2 Answers