Ember Binding Objects

Trying out the Bindings in Ember

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="aon">
    <h1>I'm the start of the application template</h1>
    {{outlet nav}}
</script>
<script type="text/x-handlebars" data-template-name="second">
    <h1>Second</h1>
</script>
<script type="text/x-handlebars" data-template-name="months">
    <h1><a {{action addCoffees this target="controller"}}>Months</a></h1>
</script>
<script type="text/x-handlebars" data-template-name="coffees">
    <h1>Coffees</h1>
</script>

JavaScript

$(function(){
    window.MyApp = Em.Application.create({
        autoInit: false
    })
    MyApp.ApplicationController = Em.Controller.extend({
        
        addCoffees: function(event){
        console.log('event', event.context.nav.get('childViews').pushObject(MyApp.CoffeesView));
        }
    });
    MyApp.ApplicationView = Em.View.extend({
        templateName: "aon"
    })
    MyApp.router = Em.Router.create({
        enableLogging: true,
        root: Em.Route.extend({
            index: Em.Route.extend({
                route:'/',
                enter:function(){   
                    //MyApp.FirstObj.set('myProps', 'hidleberg')
                },
                connectOutlets:function(router, context){
                    router.get('applicationController').connectOutlet('nav', 'navigationContainer')
                }
            })        
        })
    })
    MyApp.Coffee = Em.Object.extend({})
    MyApp.Coffees = Em.Object.create({
        content: [],
        
        propsChanged: function(var1, var2){
            console.log("props changed within firstObj", var1, var2);
            console.log(var1.content);
        }.observes('this.content')
        
    })
    MyApp.CoffeesController = Em.ArrayController.extend({
        contentBinding: 'MyApp.Coffees.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 newCoffees = Em.A();
                data.feed.entry.forEach(function(item){
                    var _date = new Date(parseInt(item.gphoto$timestamp.$t));
                    _date = _date.toDateString();
                    newCoffees.addObject(MyApp.Coffee.create({
                        url:item.content.src,
                        date:_date,//item.gphoto$timestamp.$t,
                        title:item.title.$t
    ...