Set parent controller property from child controller

Question

I have a flyers route that has a template called flyers.hbs

<div class="button-wrap">
    <button {{action 'back'}}>Go Back</button>
    {{#if isPrintable}}
        <button {{action 'print'}} class="float-right">Print Flyer</button>
    {{/if}}
</div>

{{outlet}}

In this flyers route I have view and new. New should only show the back button and view should show the back button and the print button. So in the view controller I specified a property like so.

import Ember from 'ember';

export default Ember.Controller.extend({
    isPrintable: true,
});

But obviously the parent controller for flyers does not see that property when I navigate to the view route so my print button is not showing.

What is the proper way to do this?

Answer 1

As I understand you'd like to have {{isPrintable}} in flyers template with value dependent of active child route. Maybe this will work for you.

//flyers controller
import Ember from 'ember';

export default Ember.Controller.extend({
   isPrintable: true,
});

//child route
import Ember from 'ember';
export default Ember.Route.extend({

  parentController: Ember.computed( function() {
    return this.controllerFor('flyers');
  }),

  setupController: function(controller, model) {
    this._super(controller, model);
    this.get('parentController').set('isPrintable', false);
  },

  deactivate: function() {
    this.get('parentController').set('isPrintable', true);
  }
});