Ember Context Passing

by amindunited

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<div id="root"></div>

<script type="text/x-handlebars" data-template-name="application">
    <h1>Test Context Passing</h1>
    {{outlet categories}}
    {{outlet category}}
    {{outlet other}}
</script>

<script type="text/x-handlebars" data-template-name="categories">
    <h2>List of Categories:</h2>
    <ul>
    {{#each categories in controller.content}}
        <li><a {{action cloneWidget categories }} href="#">{{categories.id}} | {{categories.name}} | {{categories.author}} |  {{categories.userID}} </a></li>
    {{/each}}
    </ul>
    
</script>

<script type="text/x-handlebars" data-template-name="category">
    <h2>List of elms in category:</h2>
    {{#each category in controller}}
        {{category.id}} | {{category.name}}
    <hr/>        
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="cat">
    CAT
</script>

JavaScript

var MegaNavApp = Ember.Application.create({
    rootElement: '#root',
    ApplicationView: Ember.View.extend({
        templateName: 'application'
    }),
    init: function(){
        this._super();
        // Bootstrap
    },
    ApplicationController: Ember.Controller.extend({}),
    Router: Ember.Router.extend({
        enableLogging: true,
        connectOutlets: function(router, context) {
                window.console.log('Router received', context);
        },
        root: Ember.Route.extend({
            cloneWidget: function(router, event) {
                window.console.log("transitioning with ", event.context);
                //debugger;
                router.transitionTo('create', event.context);  
            },
            connectOutlets: function(router, context) {
                window.console.log('root received', context);
            },
            home: Ember.Route.extend({
                route: '/',
                editItem: Ember.Route.transitionTo('edit.list'),
                connectOutlets: function(router, context) {
                    router.get('applicationController').connectOutlet('categories', 'categories');
                    window.console.log('root.home received' ,context);
                },
            }),
            create: Ember.Route.extend({
                route: '/new/:widget_id',
                connectOutlets: function(router, context) {
                    window.console.log('root.create received', context);
                    window.console.log("from " + context.name);
                    //router.get('applicationController').connectOutlet('other', 'category', MegaNavApp.Category.setId(context.id));
                    router.get('applicationController').connectOutlet('other', 'category', MegaNavApp.Category.setId(context.id));
                    //router.transitionTo('category', context.id);
                    //router.get('applicationController').connectOutlet('category', 'category',...