Trouble with controller binding

by kevinwh

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0-rc.3.js"></script>
<script src="http://builds.emberjs.com/ember-1.0.0-rc.3.js"></script>
  <script type="text/x-handlebars" data-template-name="application">
    <h2>Dishes</h2>
    <div>clicked: {{clickCount}}</div>
    <ul>
    {{#each item in dishes}}
      <li {{action "dishClicked"}}>{{#linkTo "dish" item}}{{item.name}}{{/linkTo}}</li>
    {{/each}}
    </ul>
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
    Please click a dish
  </script>

  <script type="text/x-handlebars" data-template-name="dish">
      <h2>You clicked: {{name}}, total clicks: {{clickCount}}</h2>
      {{outlet}}
  </script>

JavaScript

App = Ember.Application.create();

App.Router.map(function () {
    this.resource("dish", {
        path: '/:dish_id'
    });
});

App.rawData = [{
    id: 5,
    name: 'hamburger',
    description: 'your standard burger',
    ingredients: ['bun', 'burger', 'pickle']
}, {
    id: 21,
    name: 'pizza',
    description: 'the savory pie',
    ingredients: ['crust', 'sauce', 'pepperoni', 'cheese']
}, {
    id: 8,
    name: 'fondue',
    description: 'cheese soup',
    ingredients: ['swiss cheese', 'white wine']
}];

App.ApplicationData = Ember.Object.extend({});
App.DishData = Ember.Object.extend({});
App.allDishes = [];

App.ApplicationRoute = Ember.Route.extend({
    model: function () {
        var dishes = [];
        $.each(App.rawData, function (index, data) {
            var dish = App.DishData.create(data);
            dishes.push(dish);
            App.allDishes[dish.get('id')] = dish;
        });
        return App.ApplicationData.create({
            dishes: dishes
        });
    },
    setupController: function (controller, model) {
        this._super(controller, model);
        controller.set('clickCount', 0);
    }
});

App.ApplicationController = Ember.ObjectController.extend({
    init: function () {
        this._super();
    },
    dishClicked: function () {
        this.incrementProperty('clickCount');
    }
});

App.DishController = Ember.ObjectController.extend({
    needs: ['application'],
    //content: {},
    init: function () {
        this._super();
    },
    //clickCountBinding: 'controllers.application.clickCount'
});

App.DishRoute = Ember.Route.extend({
    model: function (params) {
        return app.allDishes[params.dish_id];
    },
    setupController: function (controller, model) {
        this._super(controller, model);
    }
});