Should I use connectOutlet in this scenario in Ember?

Question

I have a TasksList application. Each task has comments in it. I was thinking of adding comments as a Plug n Play kind of outlet.

I have a ViewerRoute which displays individual tasks:

App.ViewerRoute = Ember.Route.extend({
    activate: function () {
        $(document).attr('title', 'Task View');
    },
   renderTemplate: function () {
        this.render('Comments', { into: "Viewer", outlet: "comment", controller: "Comment" });
    }
});

My viewer template has the following Outlet {{outlet comment}}

I also created a Comments.hbs file with a few sample markups:

<div class="row-fluid">
    <div class="well span12">
        <div class="page-header">
          <h3>
            Followups
          </h3>
        </div>
</div>

but when I run the page, I get the error message that says "Cannot call method connectOutlet of undefined". I triangulated the problem to the following function inside ember

_lookupActiveView: function(templateName) {
    var active = this._activeViews[templateName]; //templateName is "Comment" 
    return active && active[0];
  },

The problem is that this function always return undefined. Eventually when the code runs into parentView.connectOutlet(options.outlet, view); it hits the error.

Am I missing something?

here is my router

App.Router.map(function () {

    this.resource("taskspanel", function () {
        this.resource("viewer", { path: '/viewer/:taskId' }, function () {
        });
        this.resource("new", { path: '/new' });
    });

Answer 1

if your named outlet is in viewer you should render into there, additionally, it appears like viewer won't be rendered since you are overriding the renderTemplate hook of viewer, and rendering something different.

 this.render();
 this.render('Comments', { into: "viewer", outlet: "comment", controller: "Comment" });

http://emberjs.com/guides/routing/rendering-a-template/

App.PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('favoritePost', {   // the template to render
      into: 'posts',                // the route to render into
      outlet: 'posts',              // the name of the outlet in the route's template
      controller: 'blogPost'        // the controller to use for the template
    });
    this.render('comments', {
      into: 'favoritePost',
      outlet: 'comment',
      controller: 'blogPost'
    });
  }
});