Ember.js - Is it possible to use an {{ action }} in one template to affect a {{ bind-attr }} in another template

Question

Is it possible to use an {{ action }} in one template to affect a {{ bind-attr }} in another template.

The objective is the get an action in 1 template to change the bind-attr in another template. Both have different controllers.

Example:

Template 1:

<script type="text/x-handlebars" data-template-name="diary">
    <header class="dashboard-component-header" {{ action expand }}></header>
</script>

Template 2

<script type="text/x-handlebars" data-template-name="diary-section">
    <section class="dashboard-component-section" {{ bind-attr class="state:active" }}></section>
</section>

Controller for template 1

App.DiaryController = Ember.Controller.extend({
    actions: {
        expand: function () {
            this.toggleProperty('state');
        }
    }
});

Answer 1

I think you can use "needs" hook to access second controller in first controller

http://emberjs.com/guides/controllers/dependencies-between-controllers/

and then on an action use the object of second controller to set the property which is binded using bind-attr

something like

App.DiaryController = Ember.Controller.extend({
  needs: "diarySection", 
  actions: {
    expand: function () {
        controllers.diarySection.set('state', false);
    }
  }
});

where "diarySection" corresponds to App.DiarySectionController the controller for template 2 and you can access the instance of second controller using controllers.diarySection