Ember.js Controller Hierarchy part 4

Ember.js Controller Hierarchy part 4: needs

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 4</h3>

<b>ChildViewController will now have a property of controllers.navigation returning an instance of it’s neighboring singleton controller. It also has access to controllers.index which is the parent IndexController singleton.</b>

<!--   <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> --> 
      
  <script type="text/x-handlebars" id="index">
    <hr>
    <p>From index, self: {{controller}}</p>
    <div>{{render 'navigation'}}</div>
    <div>{{render 'childView'}}</div>
  </script>

  <script type="text/x-handlebars" id="navigation">
    <hr>
    <p>From navigation, self: {{controller}}</p>
  </script>
      
  <script type="text/x-handlebars" id="childView">
    <hr>
    <p>From childView, navigation: {{controllers.navigation}}</p>
    <hr>    
    <p>From childView, index: {{controllers.index}}</p>
  </script>

JavaScript

var App = Ember.Application.create({
    //LOG_TRANSITIONS: true,
    //LOG_RESOLVER: true,
    //LOG_ACTIVE_GENERATION: true, // log whats being actively generated
    //LOG_MODULE_RESOLVER: true, 
    //LOG_TRANSITIONS: true,
    //LOG_TRANSITIONS_INTERNAL: true,
    //LOG_VIEW_LOOKUPS: true 
});

App.IndexRoute = Em.Route.extend({});

App.IndexController = Em.Controller.extend({});

App.ChildViewController = Em.Controller.extend({
  needs: ['navigation', 'index']
});