Ember Container Views

Creating dynamic views without routing

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>
    
</script>
<script type="text/x-handlebars" data-template-name="months">
    <h1>Months!! <a {{action foo target="View"}} >?</a></h1>
    {{#each month in view.content tagName="ul"}}
        {{#with month}}
            <li>!!{{month.date}}</li>
        {{/with}}
    {{/each}}
</script>

JavaScript

$(function(){
    window.MyApp = Em.Application.create({
        templateName: "applicaton",
        autoInit: false
    })
    MyApp.ApplicationController = Em.Controller.extend();
    MyApp.ApplicationView = Em.View.extend()
    MyApp.router = Em.Router.create({
        enableLogging: true,
        root: Em.Route.extend({
            index: Em.Route.extend({
                route:'/',
                enter:function(context){
                    //var containerView = //Em.View.templates//['my_container_view']
                    console.log("meh ", context);
                    console.log("meh ", MyApp.NavContainer.get('childViews').pushObject(MyApp.MonthsView.create()))
                    //MyApp.NavContainer
                    /*
                    var childView = containerView.createChildView(App.AnotherView);
                    containerView.get('childViews').pushObject(childView);
                    */
                },
                connectOutlets:function(router, context){
                    
                }
            })        
        })
    })
        
MyApp.NavContainer = Em.ContainerView.create({});
MyApp.NavContainer.append(MyApp.ApplicationView)
//////////////////////////////////////////////////////////////////////////////////
// SOF Create the coffes
    
    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...