Render inside in outlet replacing this content

Question

I'm having some difficults to render a content inside a template.

It seems to be a easy task to do, but I couldn't do anyway.

Some body can help me?

ApplicationView

<script type="text/x-handlebars" id="application">
<header class="logo"><!-- ... --></header>
<nav><!-- ... --></nav>
<hr class="top" />
{{outlet}}
<hr class="bottom" />
<footer><!-- ... --><div class="clear"></div>
</footer>
</script>

I have the route:

this.resource('exibition', {path: '/exposicoes/:exibition_id'}, function() {
  this.route('artist', {path: '/artistas/:artist_id'});
});

Then the link exposicoes/2 shows the exposition page with id=2 on application outlet, right?

The ExbitionView:

<script type="text/x-handlebars" id="exibition">
  <div class="exibitions">
    <h1>{{#link-to 'exibition'}}{{title}}{{/link-to}}</h1>
    <div class="left">
      <h2>Apresentação</h2>
      {{{text}}}
    </div>
    <div class="right"><h2>Artistas</h2>
      <ul>
        {{#each artist in artists}}
          <li>{{#link-to 'exibition.artist' artist}}{{artist.name}}{{/link-to}}</li>
        {{/each}}
      </ul>
    </div>
  <div class="clear"></div>
</div>
</script>

How can I make the artists links in the ExbitionView open in the same area where is the {{{text}}} replacing the content?

I tried use a outlet for this, some like:

<div class="left">
<h2>Apresentação</h2>
{{outlet showhere}}
</div>

And populate it with renderTemplate (and disconnectOutlet to clearup) when ExbitionView are rendered, but if the user come back from /exibitions/2/artists/2 to /exibitions/2 using back button or even a link on page the content doesn't show again.

Can you put it in a jsfiddle? I think you are doing something I had to do just recently, but it would be easier to visualize your progression if I could see it? — jasonpgignac, Feb 23 '14 at 13:52

score 1 · Accepted Answer · answered Feb 24 '14 at 14:36

You're very close to the right approach.

As you suggested, replace your {{text}} handlebar tag with an outlet as follows:

<div class="left">
    <h2>Apresentação</h2>
    {{outlet}}
</div>

Then, add an explicit index template:

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

Along with a matching ExhibitionIndexRoute class to handle setting up the model for this route (with your text data in it).

And now that you have an outlet, your artists route will correctly render into this outlet and replace the {{text}}, while the ExhibitionIndexRoute will correctly repopulate the data when you use the back button.

Amazing gravityplanx! You save my day! Just an observation, it's necessary `this.modelFor('exibition');` to get the parent model on `ExibitionIndexRoute`. thanks a lot people! — Eduardo Rosa, Feb 25 '14 at 02:26

Render inside in outlet replacing this content

1 Answers1