Ember Coffee Nav

Ember Mega Navigation Using My Coffees through picasa

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-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>I'm the start of the application template</h1>
    
    {{outlet yearsNavOutlet}}
</script>
<script type="text/x-handlebars" data-template-name="yearsTemplate">
    years
    {{#each year in controller.content}}
        {{#view CoffeesApp.yearsView }}
            {{#with year}}
                {{name}}
            {{/with}}
        {{/view}}
    {{/each}}
</script>
<div id="coffeeNav">

</div>

JavaScript

$(function(){
    window.CoffeesApp = Em.Application.create({
        rootElement:'#coffeeNav',
        templateName: "applicaton",
        autoInit: false
    })
    CoffeesApp.ApplicationController = Em.Controller.extend();
    CoffeesApp.ApplicationView = Em.View.extend()
    CoffeesApp.router = Em.Router.create({
        enableLogging: true,
        root: Em.Route.extend({
            index: Em.Route.extend({
                route:'/',
                enter:function(){
                    //MyApp.BarView.create().appendTo('#topWrap');                    
                    //MyApp.FooView.create().appendTo('#bottomWrap');
        
                    
                },
                connectOutlets:function(router, context){
                    router.get('applicationController').connectOutlet('yearsNavOutlet', 'years')
        //console.log(router.get('yearsController').content);
                    //router.get('yearsController').updateContent()
                }
            })        
        })
    })

    CoffeesApp.Coffee = Em.Object.extend({
    
    })
    CoffeesApp.CoffeesController = Em.ArrayController.extend({
        content: [],
        init: function(){
            var url = "http://picasaweb.google.com/data/feed/api/user/"+
                        "buckley.robin/albumid/5751950773409336513" + 
                        '' +'?alt=json&thumbsize=' + 
                        '200';
            var self = this;
            $.getJSON(url, function(data){
                var newContent = Em.A();
                data.feed.entry.forEach(function(item){
                    var _date = new Date(parseInt(item.gphoto$timestamp.$t));
                    _date = _date.toDateString();
                    newContent.pushObject(CoffeesApp.Coffee.create({
                        url:item.content.src,
                        date:_date,//item.gphoto$timestamp.$t,
                        title:item.title.$t
                    }))
                })
            ...