Search code examples
ember.jsseparation-of-concerns

Rendering route inside child view


I've been trying to clean up some of my code, and wanted to refactor a 'sidebar' partial into a View/Template combo, since there are navigation elements that need to be controlled by the child views that get rendered in the outlet.

It currently looks like this

Map (Route/View/Template)
  Sidebar (partial) - has {{outlet}}

Other routes render in Sidebar {{outlet}}

Now I want to make the Sidebar have a View, not just be a template, since I want to control some UI changes based on what's rendered within there.

Here is a jsbin with an example that doesn't work. I also tried {{render 'sidebar'}} but that didn't work either. Using RC.8 by the way.

Edit
Another attempt here.


Solution

  • The sidebar template should be rendered in the application template (not the index one) otherwise when you enter the /test route it doesn't show up.

    Then in renderTemplate of App.TestRoute you can render the templates in the 2 outlets (sidebar and main).

    App.TestRoute = Ember.Route.extend({
      renderTemplate: function () {
        this.render('test');
        this.render('test_sidebar',{
          into: 'sidebar',
          outlet: 'sidebar'
        });
      }
    });
    

    See this jsbin example.

    I hope it helps.