Accessing inner `model` in outer template

I have a model Post which has a method that returns the nextPost.

I want to build a navigation bar that allows me to go to the next post.

This can work like this:

<!-- templates/post.hbs -->
{{#link-to 'posts' model.nextPost}}
  {{model.nextPost.title}}
{{/link-to}}

The problem is that I want to render this control on the outer level, this is in the application.hbs template but in there I have not access to the model/post that is actually rendered.

Check diagram:

How can I deal with this situation?

You can use a service, where you can store and access you current post. That service will be available in navigation (through application controller) and in posts (I assume route).

2 Likes

Sounds like ember-wormhole might be able to help. Using ember-wormhole, you could create a <div> in your application.hbs like:

<!-- application.hbs -->
<div class="next-post">
</div>

You could then define your navigation link in your posts.hbs and wormhole it up to the application.hbs:

<!-- templates/post.hbs -->
{{#ember-wormhole to="next-post"}}
  {{#link-to 'posts' model.nextPost}}
    {{model.nextPost.title}}
  {{/link-to}}
{{/ember-wormhole}}
3 Likes