Ember.js Controller Hierarchy part 3

Ember.js Controller Hierarchy part 3: route events

by jdcravens

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://builds.emberjs.com/release/ember.js"></script>
<h3>Ember.js Controller Hierarchy part 3</h3>

<p>controllerFor is used to fetch singleton instances of a given controller. If no controller handles the message and the route does not handle the message, an error will be raised. The error for this example message would be Uncaught Error: Nothing handled the event 'pushButton'.</p>

<b>Arguments can be passed via send or via action, though I’ve only passed the message name itself in these examples.</b>

<p>NOTE: message bubbling stops at the leaf route. If you have a nest route, the message will only bubble to that route, then it will raise the Uncaught error. The message will not propagate through parent routes or their templates’ controllers.</p>

  <script type="text/x-handlebars" id="index">
    <hr>
    <h2>index</h2>
    <p>Last action: {{lastAction}}</p>
    <div>{{render 'childView'}}</div>
  </script>
  <script type="text/x-handlebars" id="childView">
    <hr>
    <h3>childView</h3>
    <p>Last action: {{lastAction}}</p>
    <button {{action 'pushButton'}}>Push me Button</button>
  </script>

JavaScript

var App = Em.Application.create();

App.IndexRoute = Em.Route.extend({
  actions: {
    pushButton: function(){
      this.controllerFor('index').set('lastAction', 'Me buttons been pushed! Again!');
      this.controllerFor('childView').set('lastAction', 'Me buttons been pushed!');
    }
  }
});

App.IndexController = Em.Controller.extend({
  //pushButton: function(){
    //this.set('lastAction', 'Me buttons been pushed! Again!');
  //}
});

App.ChildViewController = Em.Controller.extend({
  //pushButton: function(){
    //this.set('lastAction', 'Me buttons been pushed!');
    //this.get('target').send('pushButton');
  //}
});