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))) <a {{action showbbb}}>showbbb</a>
</script>

<script type="text/x-handlebars" data-template-name='bbb-view'>
    (((bbb-view))) <a {{action showaaa}}>showaaa</a>
</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.routeScreen = function(aName) { 
    return Ember.Route.extend({
        route: aName,
        index: Ember.Route.extend({
            route: '/'
        }),
        connectOutlets: function(router) {
            var applicationController = router.get('applicationController');
            var controllerName = router.currentState.name; // short name of controller on applicationController, assume same as route
            applicationController.connectOutlet({
                // name of outlet in template
                outletName: 'innerOutlet',
                name: controllerName,                 
                context: {} // data to pass to controller 
            });
        }
    });
};

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

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'aaa'
        }),
        
        showbbb: function(router) {
            router.transitionTo('bbb');
        }, 

        showaaa: function(router) {
            router.transitionTo('aaa');
        }, 
        
        aaa: App.routeScreen('aaa'),

        bbb: App.routeScreen('bbb')
        
    })
});

App.initialize();