EmberJS: ArrayController -> ArrayController -> ObjectController error

Question

I am having a problem adding an array controller as an item controller of another array controller.

Error I am getting is:

Error while loading route: TypeError {} ember.min.js:15
Uncaught TypeError: Object # has no method 'addArrayObserver'

JSFiddle: http://jsfiddle.net/t5Uyr/3/

Here is my HTML:

<script type="text/x-handlebars">
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>items</th>
            </tr>
        </thead>
        <tbody>
            {{#each}}
            <tr>
                <td>{{id}}</td>
                <td>
                    <ul>
                    {{#each items}}
                        <li>{{formattedName}}</li>
                    {{/each}}
                    </ul>
                </td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</script>

As you can see, inside the template I iterate over a collection of data with each loop, inside the each loop I want to iterate over a subcollection of the data.

Here is my JS code:

window.App = Ember.Application.create({});

App.ApplicationRoute = Ember.Route.extend({

    model: function () {

        var data = [
            {
                id: "111",
                items: [
                    {
                        name: "foo"
                    },
                    {
                        name: "bar"
                    }
                ]
            },
            {
                id: "222",
                items: [
                    {
                        name: "hello"
                    },
                    {
                        name: "world"
                    }
                ]
            }
        ];

        return data;

    }

});

App.ApplicationController = Ember.ArrayController.extend({

    itemController: "row"

});

App.RowController = Ember.ArrayController.extend({

    itemController: "item"

});

App.ItemController = Ember.ObjectController.extend({

    formattedName: function () {
        return "My name is " + this.get("name");
    }.property("name")

});

Answer 1

App.RowController should be an objectController your items (rows) are objects with an array in one of their properties and not arrays themselves... You can assing the controller in the inner each directly and remove itemController from the App.RowController.

JavaScript

App.RowController = Ember.ObjectController.extend()

Handlebars

{{each items itemController='item'}}

JsFiddle http://jsfiddle.net/mUJAa/3/