Ember Starter Kit

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
<script type="text/x-handlebars">
    <h2>Setting itemController with named each still changes context</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <h2>Without Item Controller</h2>
    <ul>
    {{#each item in model}}
      <li>{{item.name}} - parent value: "{{foo}}", this: {{this}}</li>
    {{/each}}
    </ul>
      
    <h2>With Item Controller</h2>
    <ul>
    {{#each item in model itemController="fooItem"}}
        
      <li>{{item.name}} - parent value: "{{foo}}", this: {{this}}</li>
     
    {{/each}}
    </ul>
  </script>

CSS

/* Put your CSS here */
 html, body {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function () {
    // put your routes here
});

App.IndexController = Ember.Controller.extend({
    foo: "value from parent" 
});

App.FooItemController = Ember.ObjectController.extend({
    // uncomment this to make it "work"
    // foo: Ember.computed.alias("parentController.foo")
});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        return [
            Ember.Object.create({name: "Tom"}),
            Ember.Object.create({name: "Dick"}),
            Ember.Object.create({name: "Harry"})            
        ];
    }
});