ItemController - nested

by fangyang

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 itemController='item'}}
                        <li>{{formattedName}}</li>
                    {{/each}}
                    </ul>
                </td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0/ember.min.js"></script>

JavaScript

//http://stackoverflow.com/questions/19499764/emberjs-arraycontroller-arraycontroller-objectcontroller-error

$(document).ready(function () {
    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.ObjectController.extend({});
    
    App.ItemController = Ember.ObjectController.extend({
        
        formattedName: function () {
            return "My name is " + this.get("name");
        }.property("name")
    
    });
});