Proxy content to another controller Solution

Solution

by Nairam

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0-rc.4.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="index">
    <p>Names:</p>
    {{#each item in controller }}
    <p>{{item.name}}</p>
    {{/each}}
    {{#linkTo "start" }}Go to Start{{/linkTo}}
    
</script>

<script type="text/x-handlebars" data-template-name="start">
    <p>You are on start</p>
    {{#each item in contentFromOtherController }}
    <p>{{item.name}}</p>
    {{/each}}
    
    <button {{action "alert"}}>Show Alert</button>
</script>

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
    this.route("start")
});

App.StartRoute = Ember.Route.extend({});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return [Ember.Object.create({id: 523, name: "John"}),
                Ember.Object.create({id: 534, name: "Warren"}),
                Ember.Object.create({id: 234, name: "Katy" })
         ];
    }
});

App.IndexController = Ember.ArrayController.extend({
    sortProperties: ["id"],
    sortAscending: true
    
});

App.StartController = Ember.ObjectController.extend({
    needs: 'index',
    contentFromOtherController: function(){
        // if you want to get the sorted content from the other
        // controller take "arrangedContent"
        return this.get("controllers.index.arrangedContent");
    }.property("controllers.index.content"),
    alert: function() {
        // get the "content" from the IndexController;
        var names = this.get("controllers.index.arrangedContent");
        alert(names.objectAt(2).name);   
    }
});