Ember.js - Call parent model hook to load data for child

ember-router, ember.js, javascript, model, router

Solution

The `devices.index` route is not the parent route, it's another leaf route. Typically you would define the model on the resource route and then access through the leaf routes:

App.Router.map(function(){
    this.resource('index', { path: '/' } );
    this.resource('devices', { path: '/devices'}, function() {
        this.route('device', { path: ':imei'});
    });
});

Master route:

App.DevicesRoute = Ember.Route.extend({
    model: function() {

        var self = this;
        return requestController.get({
            url: "foo/bar/",
            success: function(data) {
                console.log(data);
                return data;
            },
            error: function() {
                console.log("error");
                return [];
            }
        });
    }
});

Index route: (in future ember versions this will automatically pick up parent's model)

App.DevicesIndexRoute = Ember.Route.extend({
    model: function() {
        this.modelFor('devices');
    }
});

Detail route:

App.DevicesDeviceRoute = Ember.Route.extend({
    model: function(args) {
        var model = this.modelFor('devices').findBy('imei', args.imei);
        return model;
    }
});

Problem

Original source