Simple List Subview

by gazmcghee

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name='app-view'>
    <h1>Welcome to UFO app!</h1>
    <hr/>
    {{outlet innerOutlet}}
    <hr/>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name='aaa-view'>
    (((aaa-view)))
</script>

<script type="text/x-handlebars" data-template-name='bbb-view'>
    (((bbb-view)))
</script>

CSS

a {
    color: blue
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'app-view'
});

App.AaaController = Ember.Controller.extend();
App.AaaView = Ember.View.extend({
    templateName: 'aaa-view'
});

App.BbbController = Ember.Controller.extend();
App.BbbView = Ember.View.extend({
    templateName: 'bbb-view'
});

App.Router = Ember.Router.extend({
    enableLogging: true,

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'aaa'
        }),

        aaa: Ember.Route.extend({
            route: 'aaa',
            index: Ember.Route.extend({
                route: '/'
            }),
            connectOutlets: function(router) {
                var applicationController = router.get('applicationController');
                applicationController.connectOutlet({
                    outletName: 'innerOutlet',
                    // name of outlet in template
                    name: 'aaa',
                    // short name of controller on applicationController 
                    context: {} // data to pass to ArrayController 
                });
            }

        }),
        
        bbb: Ember.Route.extend({
            route: 'bbb',
            index: Ember.Route.extend({
                route: '/'
            }),
            connectOutlets: function(router) {
                var applicationController = router.get('applicationController');
                applicationController.connectOutlet({
                    outletName: 'innerOutlet',
                    // name of outlet in template
                    name: 'bbb',
                    // short name of controller on applicationController 
                    context: {} // data to pass to ArrayController 
                });
            }

        })
        
    })
});

App.initialize();