How to access the parent controller from the child routes in Ember JS?

Question

I have a main route named list.

//items/list/route.js
setupController(controller, items) { 
    let vegItems = Ember.A([]);
    let nonVegItems = Ember.A([]);
    items.forEach((item) => {
        if (item.get('category') === "veg") {
            vegItems.pushObject(item);
        }

        if (item.get('category') === "non_veg") {
            nonVegItems.pushObject(item);
        }
    })

    controller.set('vegItems', vegItems)
    controller.set('nonVegItems', nonVegItems);
}

Now inside the list route, I have the routes named veg and non-veg. i.e list/veg and list/non-veg. How can I access the controller variables of parent route, i.e vegItems and nonVegItems from list/route.js to the child route to load the data in list/veg/template.hbs and list/non-veg/template.hbs?

Answer 1

this.controllerFor('list') - Returns the controller of the current route, or a parent (or any ancestor) route in a route hierarchy. You can get all the properties through get method.

this.modelFor('list') - Returns the resolved model of a parent (or any ancestor) route in a route hierarchy.

list:Ember.inject.controller() - Creates a property that lazily looks up another controller in the container. You can inject it only in the controller.

Reference:

https://emberjs.com/api/ember/2.14/classes/Ember.Route/methods/controllerFor?anchor=controllerFor

https://emberjs.com/api/ember/2.14/classes/Ember.Route/methods/controllerFor?anchor=modelFor

https://www.emberjs.com/api/ember/2.14/namespaces/Ember.inject/methods/controller?anchor=controller