Search code examples
javascriptember.jsmodelrouterember-router

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


I have a master/detail view in Ember. If i am calling the detail page directly, the model hook of the detail page needs the model(data) from the parent(master). The detail model hook is called - whats the proper way to get/call the model so the modelFor function in the detail hook works.

Router:

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

Master Route:

App.DevicesIndexRoute = 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 [];
            }
        });
    }
});

Detail Route:

    App.DeviceRoute = Ember.Route.extend({
        model: function(args) {
////// Gets Called - needs data from master!!
            var model = this.modelFor('devices.index').findBy('imei', args.imei);
            return model;
        }
    });

Thanks for help


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;
        }
    });