Loading view in route with dynamic segments using link-to


#1

I have route that has a dynamic segment and provides a model which is loading asynchronously. What I want to do is add a loading view until the model gets resolved. Users enter the route through a link-to helper and so the model context does not always get called.

Anyone knows how I can achieve a loading view in that case?

Time for some code:

// Router
Router.map(function() {
  this.route('group', { path: '/tab/:tab_id/group/:group_name' });
  this.route('loading');
});

// Group route
export default Ember.Route.extend({

  model: function(params) {
    return new Ember.RSVP.Promise(function(resolve) {...});
  },

  serialize: function(model) {
    return {
      tab_id: model.get('tab').get('id'),
      group_name: model.get('name')
    };
  }

});

#2

I managed to make the model context execute every time using the following in the link creation:

{{#link-to 'group' entry.id group.name }}{{group.name}}{{/link-to}}

My problem now is that the loading route doe not show up in the outlet. Perhaps that has to do with the promise I return?

Here is the promise content from the model context:

return new Ember.RSVP.Promise(function(resolve) {
  self.store.findById('tab', params.tab_id).then(function(tab) {
    tab.get('groups').forEach(function(group) {
      if (group.get('name') === params.group_name) {
        resolve(group);
      }
    });
  });
});

The reason behind doing that ugly think is that the models from the server do not have ids and I generate them from ember using guid but I still want to allow visiting a url that you send to someone.