Emberjs - Collection Views And Context

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 candies}}
    {{outlet fruitsCollection}}
    
</script>
<script type="text/x-handlebars" data-template-name="candy_1">
    <h2>Candy One</h2>
    {{#each candy in controller.content}}
        {{#with candy}}
    <a {{action changeTemplate this target="view"}}>{{candy.colour}}</a>||
        {{/with}}
    {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="candy_2">
    <h2>Candy Two</h2>
    {{#each candy in controller.content}}
        {{#with candy tagName="ul"}}
    <li><a {{action changeTemplate this target="view"}}>{{candy.colour}}</a></li>
        {{/with}}
    {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="fruitsList">
    {{#collection contentBinding="App.FruitsController.content"}}
        {{view App.FruitsView}}
    {{/collection}}
    
</script>
<script type="text/x-handlebars" data-template-name="fruitsList">
    <h2>Basic Fruit:</h2>
    {{view.content.name}}
</script>
<script type="text/x-handlebars" data-template-name="yellowFruit">
    <h2>Yellow Fruit:</h2>
    {{view.content.name}}
</script>
    <script type="text/x-handlebars" data-template-name="fruit">
    <h2>Just Fruit</h2>
</script>

CSS

body {
    background-image: url(http://handlebarsjs.com/images/noise.png);
    background-image: url("http://handlebarsjs.com/images/noise.png");
}
a {
    cursor: pointer;
}
.foo {
    color:red;
}

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('candies', 'box');
                    router.get('applicationController').connectOutlet('fruitsCollection', 'fruitsCollection');
                }, 
            })
        })
    });
    
 
    App.Box = Em.Object.create({
        content:[
            {type:"m&m", colour:"red"},
            {type:"m&m", colour:"green"},
            {type:"m&m", colour:"blue"},
            {type:"m&m", colour:"brown"}
        ]
    })
    App.BoxController = Em.Controller.extend({
        contentBinding: 'App.Box.content',
    });
    App.BoxView = Em.View.extend({
        templateName:"candy_1",
        changeTemplate: function(){
            console.log("template name = ", this.get('templateName'));
            if (this.get('templateName') == 'candy_1') {
                this.set('templateName', 'candy_2');
                this.rerender();
            }
            else {
                this.set('templateName', 'candy_1');
                this.rerender();
            }
        }
    })
    App.FruitsCollectionView = Em.CollectionView.extend({
        contentBinding:'App.Fruits.content',
        itemViewClass:'App.FruitsView'
        
    })
    
    App.Fruits = Em.Object.create({
        content:[{type:"fruit", name:"banana", colour:"yellow"},
                 {type:"fruit", name:"grape", colour:"purple"},
                 {type:"fruit", name:"apple", colour:"red"}
                ]
    })
   ...