Newly created record doesn't appear in list

1

Hi,

I’m having a problem where a newly created (ember-data) record doesn’t appear in the list of all records. Basic setup is this:

this.resource('game_items', function() {
  this.route('new');
}

The GameItemsRoute loads all the records for a specific game:

App.GameItemsRoute = Ember.Route.extend(Ember.Auth.AuthenticatedRouteMixin, {
  model: function() {
    return this.store.findQuery('gameItem', { game_id: this.modelFor('game').get('id') });
  }
});

Then I open the “new game item” view in a modal over the list of all game items:

App.GameItemsNewRoute = Ember.Route.extend(Ember.Auth.AuthenticatedRouteMixin, {
  renderTemplate: function() {
    this.render('game_items/new', { into: 'application', outlet: 'modal' });
  },
  model: function() {
    return this.get('store').createRecord('gameItem', { game: this.modelFor('game') });
  }
});

After I save the record I navigate back to the game items list:

App.GameItemsNewController = App.GameItemModalController.extend({
  closeModal: function() {
    this.transitionToRoute('game_items');
  },
  submitModal: function() {
    this.set('model.active', true);
    return this.get('model').save();
  }
});

(closeModal is automatically invoked when the promise returned by submitModal resolves). The problem now is that the newly created record doesn’t appear in the list until I reload the page or navigate away and back to the route again. I guess the App.GameItemsRoute’s model method isn’t invoked again as I’m staying on a sub route of it all the time but how do I force it to reload the model then?

2

Move return this.store.findQuery(‘gameItem’, { game_id: this.modelFor(‘game’).get(‘id’) }); to setupController method. And set this collection into controller.

3

But that’s not really how it’s supposed wo work I think? I mean shouldn’t the model be loaded in model?

4

Model don’t run every transaction to this route, but setupController runs.

5

I would not recommend setting up the model in the setupController hook. You’re in for a bad time if you do.

Instead, if you do…

App.GameItemsRoute = Ember.Route.extend( Ember.Auth.AuthenticatedRouteMixin, {
  beforeModel : function() {
    return this.store.findQuery('gameItem', { game_id : this.modelFor('game').get('id') });
  }, 
  model : function() {
    var game_id = this.modelFor('game').get('id');
    return this.store.filter('gameItem', function(itm) {
      return itm.get('game_id') == game_id;
    });
  }
});

The filter property will filter against all currently loaded records…so, once you create the new record, it should appear in your list!

That being said, it might be worthwhile to make sure your relationships are setup properly…because, if you do, something like this would work (and probably a bit easier on the eyes):

App.Game = DS.Model.extend({
  gameItems : DS.hasMany('gameItem')
});

App.GameItem = DS.Model.extend({
  game : DS.belongsTo('game')
});

App.GameItemsRoute = Ember.Route.extend( Ember.Auth.AuthenticatedRouteMixin, {
  model : function() {
    return this.modelFor('game').get('gameItems');
  }
});
1 Like