Ember Meganav Notes 2

by amindunited

HTML

<script src="http://amindunited.com/lib/js/int/ember.1.pre.jquery.1.8.fix.js"></script>
<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-1.0.pre.js"></script>
<script type="text/x-handlebars" data-template-name="MegaNavApp">
    <div class="navWrap">
        {{outlet}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="categories">
    {{#each categories in controller.content}}
        <div>
            <a {{action showCategory this}} >{{categories.title}}</a>
        </div>
    {{/each}}
    {{outlet category}}
</script>
<script type="text/x-handlebars" data-template-name="category">
    <div><h1></h1></div>
</script>

JavaScript

window.MegaNavApp = Ember.Application.create({
    ApplicationView : Ember.View.extend({
        templateName: "MegaNavApp"
    }),
    ApplicationController: Ember.Controller.extend({}),
    
    Router: Ember.Router.extend({
        root: Ember.Route.extend({
            index: Ember.Route.extend({
                route: '/',
                showCategory : function( router, context ){
                    console.log("showCategory recieves:");
                    console.log(router);
                    console.log(context);
                    //router.get('applicationController').connectOutlet('category', 'category')
                    router.transitionTo('category', context.context)
                },
                connectOutlets: function( router, context){
                    router.get('applicationController').connectOutlet('categories')
                }
            }),
            category: Em.Route.extend({
                route:'/category',
                showCategory: function( router, context ){
                    console.log("change category");
                    console.log(context.context);
                    router.transitionTo('category', context.context);
                },
                enter: function(){
                    console.log("Here I am Rock you like a category");
                }
            })
        })
    })
})

MegaNavApp.Category = Em.Object.extend({});
MegaNavApp.CategoryController = Ember.ArrayController.extend({
    
});
MegaNavApp.CategoryView = Ember.View.extend({
    templateName: "category"
});

MegaNavApp.Categories = Ember.Object.extend({
    id:null,
    title:null,
    url:null,
    userID: null,
    author:null
});

MegaNavApp.CategoriesController = Ember.ArrayController.extend({
    content: [],
    init:function(){
        var self = this;
        var picURL = "http://picasaweb.google.com/data/feed/api/user/buckley.robin/" + '' +'?alt=json&thumbsize=' + '200';
        $.getJSON(picURL, function(data){
...