CODEWITHSUNDEEP
ember.js
Abuelo
Abuelo

Reputation: 209

Triggering an action on the parent route from a component in the sub route

In my application I currently have a parent route that manages my query params. I have a component that resets these params using a closure action. The current implementation works and looks like this:

// Component

import Component from '@ember/component';

export default Component.extend({
  tagName: '',
  actions: {
    actionTest() {
      this.get('onClick')()
    }
  }

});


  <div class="text-muted" style="cursor: pointer" {{action "actionTest"}}><small>{{text}}</small></div>

// Parent Route Controller

import Controller from '@ember/controller';

export default Controller.extend({

  actions: {
    resetAllParams() {
      this.set('param1', null)
      this.set('param2', null)
    }
  }

});

// Template

{{reset-params-button onClick=(action "resetAllParams") text="Reset Filters" size="xs"}}

I would like to move the component from the Parent Route Template to a Sub Route template. When I do this I no longer have the ability to reset the params - my understanding that it isn't possible to manipulate the params of a parent route on a sub-route.

I think that I need an extra step in the closure action feature but I don't understand it very well. I tried to use Ember Route Action Helper but this doesn't appear appropriate for this use case.

I tried to 'bubble up' the action by adding the following:

  // Sub-Route Template

{{reset-params-button onClick=(action "resetAllParams") text="Reset Filters" size="xs"}}

// Sub Route Controller

import Controller from '@ember/controller';

export default Controller.extend({
resetAllParams(){}
});

But it error'd out with a 'this.get is not a function' error from the action in the component controller.

Any help greatly appreciated

Upvotes: 0

Views: 427

Answers (1)

Gaurav
Gaurav

Reputation: 12796

You can inject the parent's route controller into the child's route controller. In the child's route controller:

@import Controller, { inject as controller } from '@ember/controller';

export default Controller.extend({
  parent: controller(), // use actual name of parent route controller

  actions: {
    resetAllParams() {
      this.get('parent').send('resetAllParams');
    }
  }
});

Hope this helps. For more information on injecting, see https://guides.emberjs.com/v3.4.0/applications/dependency-injection/#toc_ad-hoc-injections

Upvotes: 2

Related Questions