Search code examples
ember-router

Router for a portion of a page

Does the view <--> URL matching pairs, effectively mean that the router has to control the entire page and cannot be used for controlling a subset of the page? I have a situation where Ember is used for a portion of a page where the outermost container view is manually added to a DOM element. A workaround would be to convert the entire page to Ember but perhaps there are other ways? Thanks for any pointers!

Solution

  • You can specify outlets to insert a dynamic portion of a page. An outlet renders the current view. In that view there can be another outlet to display the subview.

    See this example:

    application template

    <div id="content">
  <nav> .. menu part .. </nav>
  {{outlet}}
</div>

    This renders the dynamic part of your app. When you browse to for instance /pages you can display a list of pages in it. When you go to '/pages/1' there is an {{outlet}} in the pages-template which renders the page-template.

    pages template

    <ul>
{{#each page in controller}}
  <li>{{#linkTo page}}{{page.name}}{{/linkTo}}</li> 
{{/each}}
</ul>
{{outlet}}

    page template

    <h2>{{name}}</h2>

    The page-name header is now rendered below the pages-list.
    This way you can add as much dynamic content as you want.