Proper syntax for Handlebars expression within block helper. Specifically {{#link-to}}

Question

What is the proper syntax to use an objects property as the 'link-to' or other value in a handlebars expression? For example, I want to use {{page.slug}}

<ul class='main-menu'>
{{#each model as |page|}}
    <li>
        {{#link-to 'HERE'}}
            {{page.title}}
        {{/link-to}}
    </li>
{{/each}}
</ul>

Also, this may be a hacky way of making a menu, but is more about how I came to the question.

score 1 · Answer 1 · answered Mar 01 '16 at 19:27

1

The syntax for link-to is:

{{link-to ROUTE_NAME (dynamic-segment OR model)}}

So what you can do is pass the slug as the second parameter:

{{link-to 'page' page.slug}}

Which will call the model hook inside your page route, passing the slug in params object:

model(params) {
  console.log(params.slug); // logs your slug
}

Also, you need to specify the dynamic segment of your route in the router:

Router.map(function() {
  this.route('page', { path: '/:slug' });
});

However you name the dynamic segment in the router (in this case 'slug'), will be the name of the property in the params object passed into the model

answered Mar 01 '16 at 19:27

nem035

34,790
6
87
99

In my case it ended up just straight: {{#link-to page.slug}}... : ) – sheriffderek Mar 01 '16 at 19:29
Good, then its solved :). One thing to note is that your way works if you have a route with the name being whatever `page.slug` is. – nem035 Mar 01 '16 at 19:30
1

Yep! But I'm sure your more thorough example will come in handy soon enough. – sheriffderek Mar 01 '16 at 19:32

Proper syntax for Handlebars expression within block helper. Specifically {{#link-to}}

1 Answers1