Model Data not loading on direct load of route

Question

I have an application that when following a link-to everything works as expected, but when navigating directly to a child route my model data doesn't seem to load. In my child (types) route I am using this.modelForin my model hook. Here is a bin http://emberjs.jsbin.com/oSApiSeh/7#/types/secondary navigating there directly doesn't show the colors, but if you click secondary it works.

Here is the source of that jsbin:

// ... groupBy definition omitted
App = Ember.Application.create();

App.Router.map(function() {
  this.resource('colors', { path: '/' }, function() {
    this.resource('types', { path: 'types/:type_group' }, function() {});
  });
});

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

App.TypesRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('colors').filterBy('type', params.type_group);
  }
});

App.ColorsController = Ember.ArrayController.extend({
  grouped: _groupBy('type')
});

App.TypesController = Ember.ArrayController.extend({});

App.Color = Ember.Model.extend({
  'color':Ember.attr('string'),
  'type': Ember.attr('string')
});
App.Color.adapter = Ember.FixtureAdapter.create();
App.Color.FIXTURES = [
  { color:'red', type: 'primary'},
  { color:'green', type: 'primary'},
  { color: 'yellow', type: 'secondary'},
  { color: 'orange', type: 'secondary'},
  { color: 'blue', type: 'primary'}
];

My templates:

  <script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{outlet}}

    I am wanting a route to .../primary that has red, green, and blue as its model and a route to .../secondary that has yellow and orange in its model
  </script>

  <script type="text/x-handlebars" data-template-name="colors">
    <ul>
    {{#each grouped}}
      <li>{{#link-to 'types' group}}{{group}} ({{content.length}}){{/link-to}}</li>
    {{/each}}
    </ul>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="colors/index">
    all colors
  </script>

  <script type="text/x-handlebars" data-template-name="types">
    Types
    <ul>
    {{#each item in controller}}
      <li>{{item.color}} </li>
    {{/each}}
    </ul>
  </script>

Answer 1

ebryn helped me in IRC. The issue was/is promise related. Ember-Model uses .fetch() to return a promise. From that promise, we can call .then() and do resolved.get('content') and filter.

A working example can be seen here - http://emberjs.jsbin.com/cawaq/3/edit

The changes were just to TypesRoute as shown below:

App.TypesRoute = Ember.Route.extend({
  model: function(params) {
    return App.Color.fetch().then(function (items) {
      return items.get('content').filterBy('type', params.type_group);
    });
  }
});

Answer 2

The problem is that you call modelFor in your App.TypesRoute. When you enter the page 'normally', you end up in the colors.index route, which loads all colors into the store. However, when you enter directly into types or types.index, modelFor will return an empty array because the colors have not been loaded yet (it does not automatically fetch the model if not present).

The following unfortunately doesn't work either; I suspect because the model hook is not halted while the data is fetched.

App.TypesRoute = Ember.Route.extend({
  model: function(params) {
    return App.Color.find().filterBy('type', params.type_group);
  }
});

I use Ember Data myself, so unfortunately I'm not familiar enough with Ember Model to propose a solution.