Question

or else bind controller to two different views.

I’m doing this so my 'home' view gets the PostsController ‘s content.. but I need the real way to do it, if you can help me please!

HomeController: Ember.ArrayController.extend({    
     init: function() {
        setTimeout(function() {
           App.router
             .get('homeController')
               .set('content', App.router.get('postsController').get('content'));
           }, 0);
        }

})

(using last version at this time SHA: 83542a6)

Answer 1

I don’t quite understand your question. What’s wrong with the solution below? (original jsFiddle here) (updated jsFiddle here)

(UPDATED: Added skeleton router)

JavaScript / Ember:

// Application
App = Ember.Application.create({
    ApplicationController: Ember.Controller.extend(),
    ApplicationView: Ember.View.extend({
        templateName: "application-view",
    }),
    Router: Ember.Router.extend({
        // initialState of Ember.Router is "root"
        root: Ember.Route.extend({
            // "index" can be called whatever we want
            index: Ember.Route.extend({
                route: '/',
                enter: function(router) {
                    console.log("entering root.index from", router.get('currentState.name'));
                },
                connectOutlets: function(router) {
                    console.log("entered root.index, fully transitioned to", router.get('currentState.path'));
                    // Demo: read and write from router's connectOutlets
                    console.log("Router says, A:", App.get("aController").get('content'));
                    console.log("Router says, B:", App.get("bController").get('content'));
                    App.get("aController").pushObject({name: "Network switch", color: "beige", type: "Cisco"});
                    console.log("Router says, A:", App.get("aController").get('content'));
                    console.log("Router says, B:", App.get("bController").get('content'));
                }
            })
            // ... 
            // (add routes here)
            // ...
        })
    })
});

// Controllers
App.aController = Ember.ArrayController.create({
    content: [],
    addContact: function(contact) {
        this.content.push(contact);
    }
});

App.bController = Ember.Object.create({
    contentBinding: "App.aController.content"
});

// Demo: Change a (shows up in b)
App.aController.set('content', [
    {name: "Apple", color: "red", type: "fruit"},
    {name: "Banana", color: "yellow", type: "fruit"},
    {name: "Sports car", color: "black", type: "vehicle"},
    {name: "Sun", color: "white", type: "star"},
     ]);

// Demo: Change b (shows up in a)
(function() {
    var temp = App.aController.get('content');
    temp.push({name: "Linus", color: "n/a", type: "human"});    
    App.bController.set('content', temp);
})();

HTML / Handlebars:

<script type="text/x-handlebars" data-template-name="application-view">
<div id="my-app">
<h1>aController</h1>
{{#collection tagName="ul" contentBinding="App.aController.content"}}
    {{#with view.content}}
        Name: {{name}}, Color: {{color}}, Type: {{type}},
    {{/with}}
{{/collection}}
<h1>bController</h1>
{{#collection tagName="ul" contentBinding="App.bController.content"}}
    {{#with view.content}}
        Name: {{name}}, Color: {{color}}, Type: {{type}},
    {{/with}}
{{/collection}}
</div>
</script>