ember.js routers and connectOutlets

Question

I'm trying to use an already instantiated controller in my ember route.

Is it not normal to ever have instantiated a controller and want to use that in a route? I know that if I the application instantiate a controller for me, I can then to router.get("myController") but that won't access one that I had instantiated myself.

How do I get the piece of code at the bottom of my router to work?

HTML

 <script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
 </script>


<script type="text/x-handlebars" data-template-name="instanced">
    <h1>Hello from instanced template</h1>
    {{showinstancedvalue}}<hr>
    {{outlet}}
</script>


<script type="text/x-handlebars" data-template-name="foobar">
    <h1>hello from foobar</h1>
    {{foobarvalue}}
</script>

Javascript

var App = Ember.Application.create();
// application view and controller
App.ApplicationView = Ember.View.extend({
    templateName: 'application',
});
App.ApplicationController = Ember.Controller.extend();




// foobar controller and view
App.FoobarController = Ember.Controller.extend({
    foobarvalue: "working"
});
App.FoobarView = Ember.View.extend({
    templateName: 'foobar'
});



// instantiated controller and view
App.InstancedController = Ember.Controller.extend({});
App.instancedController = App.InstancedController.create({
    myvar: "a value from an instantiated controller"
});
App.InstancedView = Ember.View.extend({
    templateName: 'instanced',
});
App.instancedView = App.InstancedView.create({
    showinstancedvalueBinding: 'App.instancedController.myvar'
});

App.instancedView.append();

App.router = Ember.Router.create({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'works'
        }),
        works: Ember.Route.extend({
            route: '/works',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('foobar');
            }
        }),
        broken: Ember.Route.extend({
            route: '/broken',
            connectOutlets: function(router) {

                // no error in console, but foobar doesn't appear
                // router.get('instancedController').connectOutlet('foobar');

                // *** this one was my best guess as to what I thought would work ***
                // no error in console, but foobar doesn't appear
                // App.instancedController.connectOutlet('App.Foobar');

                // Uncaught Error: assertion failed: The name you supplied foobar did not resolve to a view FoobarView
                // App.instancedController.connectOutlet('foobar');
            }
        }),

    })
});

App.initialize(App.router);​

Answer 1

Take a look at the connectOutlet definition, it includes a basic documentation as a comment so you can have a better understanding of how it's supposed to or and to be used.

Basically, you should really connect it to the applicationController, since the {{outlet}} sits on the ApplicationView template. In this scenario, the framework will find a view and controller that should be used in that state (in your case FoobarView and foobarController since it's specified with the argument 'foobar') and add to a collection (named controllers) inside the applicationController. If you try to connect directly to your instance of foobarController, it won't find a outlet on its view (which at that moment shouldn't be instantiated, I believe) AND you'd be saying to that controller "hey, find yourself, then connect yourself to you" kind of thing.

This could work if you had an outlet inside the foobar view template and you'd connect this outlet to something other than foobar (as a child state/route). So you should read more about the outlets and named outlets.

Additionally, I strongly recommend these links:

• Router Primer - This article is about two weeks fresh, and it's apparently the best there is right now, make sure you read this one!
• Ember.js Routing - the Director’s Cut - Step-by-Step post about the Router, make sure you read this one too.
• Outlets - This is a bit old but is being mantained
• JSFiddle Sample 1 - Sample Fiddle with routing you can use as reference
• JSFiddle Sample 2 - Sample Fiddle with routing you can use as reference (this is newer than previous)

Answer 2

You should try to elaborate on your requirements. This makes no sense from my point of view.

    broken: Ember.Route.extend({
        route: '/broken',
        connectOutlets: function(router) {
            App.foobarController.connectOutlet('foobar');
        }
    }),

This code just can't work, since you are invoking connectOutlet on your fooBarController. So it searches for {{outlet}} in the assigend view. But in the template named foobar you do not not have a {{outlet}} specified. And even if you fix that, it makes just no sense, since this line would try to connect an outlet with a new instance of Foobar View. So you basically have the FooBarView of your FooBarController and inside its view, you try to connect a outlet again with a new instance of FooBarView??

So without explanation of requirements this question cannot be answered.