ItemController does not work when we have a seperate controller for View

Question

Part of learning Ember.js I am trying to create a Table View in Ember, based on example by Adam.

The issue I am facing is that if I create a seperate controller for the View and include an itemController for the Rows, ember gives following error: Uncaught TypeError: Cannot call method 'lookup' of null ember-1.0.0-rc.6.js:13933

When I debug this I find that in the following code :

controllerAt: function(idx, object, controllerClass) {
var container = get(this, 'container'),
    subControllers = get(this, '_subControllers'),
    subController = subControllers[idx];

if (!subController) {
  subController = container.lookup("controller:" + controllerClass, { singleton: false      });

The container is retrieved as null.

Whereas when it is run through ApplicationController, no such issue is there.

JS Fiddle Using ApplicationController for the View and another controller for itemController - Works Fine

JS Bin

in this the item Controller is specified as {{#each controller itemController="tableRow"}} and the controller is App.TableRowController

Here is a very similar JS Bin, JS Fiddle using a seperate TableViewController : The item controller is similarly specified as {{#each controller itemController='tableRow'}.
A seperate Controller for Table View is binded using : {{view App.TableView controllerBinding="tableViewController"}} and this tableViewController is specified as a property in ApplicationController as :

App.ApplicationController = Ember.ArrayController.extend({
tableViewController: function() {
    var tc = Ember.get('App.TableViewController').create();
    tc.set('content',Ember.ArrayProxy.create({
                        content: Ember.A(tableData)})
            );
    return tc;
}.property()
});

But for some reason, the itemController does not work here.

Here is the JS Fiddle Using seperate Controller for View, but without any itemController - this works fine

Is there anything I am missing in the controller ?

Please help. Thanks.

Darshan Sawardekar Darshan Sawardekar · Accepted Answer · 2013-07-13T05:59:34

With Ember most of the time you don't create objects directly, you declare the classes for things like controller, model, etc. And ember creates these objects using an IOC container. Avoid things like Controller.create. Similarly avoid directly controllerBinding instead use needs.

So, instead of providing a controllerBinding pass the content to be rendered by the App.TableView.

{{view App.TableView contentBinding=content}}

The setup of the tableData also belongs in a model() hook. It works in the sample because tableData variable is in scope.

Here's the updated jsfiddle.

ItemController does not work when we have a seperate controller for View

1 Answers