Emberjs - OneToManyViews v3

by amindunited

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    ++++++++++++
    {{outlet "lists"}}
    +++++++++++++
</script>

<script type="text/x-handlebars" data-template-name="lists">
    {{view App.CheeseListContainer elementId="cheeseList"}}
    {{view App.WineListContainer elementId="wineList"}}
</script>
<script type="text/x-handlebars" data-template-name="cheese">
    {{controller.target.type}}: {{controller.target.name}}
</script>
<script type="text/x-handlebars" data-template-name="wine">
    <a {{action trace this target="controller"}}> {{controller.target.type}}: {{controller.target.name}}</a>
</script>

CSS

body {
    background-image: url(http://handlebarsjs.com/images/noise.png);
    background-image: url("http://handlebarsjs.com/images/noise.png"), -webkit-radial-gradient(center center, #ededed, #c3b14a 750px);
}
a {
    cursor: pointer;
}
.foo {
    color:red;
}
.listItem {
    width: 160px;
    margin:10px;
    text-align:center;
    padding:5px;
    -webkit-border-radius: 0px 10px 10px 10px;
    border-radius: 0px 10px 10px 10px;
    -webkit-box-shadow:  2px 5px 1px 1px rgba(128, 128, 128, .5);
    box-shadow:  2px 5px 1px 1px rgba(128, 128, 128, .5);
}
.wine {
    color:black;
    background-color:rgba(256, 33, 66, .7);
}

.cheese {
    color:yellow;
    background-color:rgba(66, 33, 99, .7);
}

JavaScript

$(function(){
	//Bind Application name to window
    window.App = Em.Application.create({
        autoInit: false
    })
    
    //Create Application controller, view and router
    App.ApplicationController = Em.Controller.extend();
    App.ApplicationView = Em.View.extend({});
    App.router = Em.Router.create({
        enableLogging:true,
        location: 'none',
        root:Em.Route.extend({
            index:Em.Route.extend({
                route:'/',
                connectOutlets:function(router, context){
                    router.get('applicationController').connectOutlet('lists', 'lists');
                }, 
            })
        })
    });
    
    App.serverData = Em.Object.create({
        content:[
            { name: "Brie",
             type: "cheese",
             uuid: "asdf"
            },
            
            { name: "Gruyere",
             type: "cheese",
             uuid: "dfgh"
            },
            
            { name: "Chevre",
             type: "cheese",
             uuid: "gfds"
            },
            
            { name: "Pinot Noir",
             type: "wine",
             uuid: "qwer"
            },
            
            { name: "Chablis",
             type: "wine",
             uuid: "zxcv"
            },
        ]
    })
  
    App.Lists = Em.Object.create({
        content: App.serverData.content
    });
    App.ListsController = Em.Controller.extend({
        contentBinding:'App.Lists.content',
        init:function(){
        }
    });
    App.ListsView = Em.View.extend({
        contentBinding: 'App.Lists.content',
        templateName:"lists",
        didInsertElement:function(){
            console.log("view content", this.get('content'));
            $.each(this.get('content').filterProperty('type', 'cheese'), function(i, obj){
                App.CheeseShop.make(obj)
            })
            $.each(this.get('content').filterProperty('type', 'wine'), function(i, obj){
               ...