How to make linkTo dynamic in ember?

Question

<script type="text/x-handlebars" data-template-name="patient">
    <ul class="nav">
    {{#each menuItem in menuItems}}
        <li>{{#linkTo "dashboard.summary" menuItem}}{{menuItem.name}}{{/linkTo}}</li>
    {{/each}}
    </ul>
    {{outlet}}
</script>

In the above code, how do I make linkTo a dynamic link instead of the hardcoded "dashboard.summary"? For example, "dashboard."+menuItem.name.

I don't think this is possible, but you shouldn't need a separate route for each model anyhow. Can you explain in more detail what you're trying to accomplish? — ahmacleod, Mar 05 '13 at 05:55
I have a list of menuItems which I am fetching from DB, corresponding to each menu Item I want a different route. The menu Items are summary results meds orders vsio notes demo visits. On clicking on each of them I am taken to a different screen — Swapnil, Mar 05 '13 at 06:22

score 14 · Answer 1 · answered Feb 19 '15 at 02:56

14

In the current Ember (1.10 as of this post), helpers now accept both quoted arguments or arguments that will be looked up as attributes in the current context. I believe this was changed in Ember 1.2 ( change log ).

If quoted, the argument will be used as a string:

{{#link-to 'post'}}Posts{{/link-to}}

If not quoted, the argument will be looked up in the current context:

{{#link-to routeName}}Go To '{{routeName}}'{{/link-to}}

This will be a link-to that points to whatever the routeName property currently is set to. This can be updated dynamically.

Here is an example JSBin showing this in action: http://emberjs.jsbin.com/nelafep/1/edit?html,css,js,output

answered Feb 19 '15 at 02:56

CraigTeegarden

8,173
8
38
43

1

Do you happen to know of a way to pass parameters dynamically? – Tim Baas Jan 20 '16 at 16:23
1

This is the most up to date answer. – sheriffderek Mar 01 '16 at 19:31
1

Note (Ember 2.16 at this point) this is good: `{{#link-to (concat baseRoute ".edit") model}}Edit{{/link-to}}` – Charney Kaye Dec 22 '17 at 22:50

score 7 · Accepted Answer · edited May 23 '17 at 12:16

7

You could register a simple Handlebars helper that wraps the linkTo helper.

var linkTo = Ember.Handlebars.helpers.linkTo;
Ember.Handlebars.registerHelper('myLinkTo', function(name, suffixPath) {
  var suffix = Ember.Handlebars.get(this, suffixPath);    
  arguments = [].slice.call(arguments, 2);
  arguments.unshift(name + '.' + suffix);

  return linkTo.apply(this, arguments);
});

Then in your template you could write:

{{#each menuItems}}
    <li>{{#myLinkTo "dashboard" name this}}{{name}}{{/myLinkTo}}</li>
{{/each}}

The helper will resolve the second argument and append it to the first, preceded by a dot.

Edit: this behaviour can now be achieved without a custom helper. See c4p's answer for the contemporary solution to this problem. The solution above was last tested with Ember 1.0.0-rc.1.

edited May 23 '17 at 12:16

Community

1
1

answered Mar 05 '13 at 08:37

ahmacleod

4,280
19
43

Hi, I tried this but i got exception: Uncaught [object Object] at handlebars-1.0.0-rc.4.js:707 Which handelbars and ember version do you use? – Sobis Jun 13 '13 at 08:14
where is arguments coming from in the slice.call? how do you convert this to ember-cli / es6? – NullVoxPopuli May 18 '15 at 16:51
`arguments` is just the standard array of arguments supplied by JS when the anonymous inner function is called. You get that for free. It should be trivial to port this to ember-cli by following the [writing helpers](http://guides.emberjs.com/v1.11.0/templates/writing-helpers/) section of the Ember guide. – ahmacleod May 19 '15 at 17:56

How to make linkTo dynamic in ember?

2 Answers2

Linked

Related