Proxied Controller Functions in Ember

Using 'needs' to pass an event from the view to an unrelated controller

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{render singles}}
    {{render multis}}
    {{render exotics}}
</script>
<script type="text/x-handlebars" data-template-name="single">
    <a {{action passAround view target="controller"}}>{{view.content.name}}</a>
</script>
<script type="text/x-handlebars" data-template-name="multi">
    <a {{action passAround view target="controller"}}>{{view.content.name}}</a>
</script>
<script type="text/x-handlebars" data-template-name="exotic">
    <a {{action passAround view target="controller"}}>{{view.content.name}}</a>
</script>

CSS

html, body {
    font-size: 9pt;
}
h1 {
    font-size: 18pt;
}
h2 {
    font-size: 12pt;
}
.location ul { list-style-type: none; }
.location ul li { 
    list-style-type: none; 
    display: inline-block;
    margin: 0;
    padding:0 10px 0 10px;
    border: solid 1px gray;
    border-right:none;
}

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend();

var serverData = {
    singles : [{name:"single_1"}, {name:"single_2"}, {name:"single_3"}],
    multis : [{name:"multi_1"}, {name:"multi_2"}, {name:"multi_3"}],
    exotics : [{name:"exotic_1"}, {name:"exotic_2"}, {name:"exotic_3"}]
}

App.Singles = Em.Object.create({content:[]});
App.SinglesController = Em.Controller.extend({

    passAround: function(context){
        console.log("passAround ", context);
    }
});
App.SinglesView = Em.CollectionView.extend({ contentBinding:"App.Singles.content", itemViewClass:"App.SingleView"});

App.Single = Em.Object.extend();
App.SingleController = Em.Controller.extend();
App.SingleView = Em.View.extend({templateName:"single"});

App.Multis = Em.Object.create({content:[]});
App.MultisController = Em.Controller.extend({
    needs: ["singles"],
    passAround: function(context){
        this.get('controllers.singles').passAround(context)
    }
    
});
App.MultisView = Em.CollectionView.extend({contentBinding:"App.Multis.content", itemViewClass:"App.MultiView"});
App.Multi = Em.Object.extend();
App.MultiController = Em.Controller.extend();
App.MultiView = Em.View.extend({templateName:"multi"});

App.Exotics = Em.Object.create({content:[]});
App.ExoticsController = Em.Controller.extend({
    needs: ["singles"],
    passAround: function(context){
        this.get('controllers.singles').passAround(context)
    }
});
App.ExoticsView = Em.CollectionView.extend( {contentBinding:"App.Exotics.content", itemViewClass:"App.ExoticView"});

App.Exotic = Em.Object.extend();
App.ExoticController = Em.Controller.extend();
App.ExoticView = Em.View.extend({templateName:"exotic"});

var returnData = window.setTimeout(function(){
    for (var i = 0; i < serverData.singles.length; i++) {
        App.Singles.get('content').pushObject(App.Single.create(serverData.singles[i]))
    }
    
    for (var i = 0; i <...