Add class to ember link-to

ember.js

ember.js Problem Overview


I try to build a link to a nested route and want to add a class to this link (for twitter bootstrap)

The result should something like this:

< a href="/#/rents/42" class="btn btn-primary btn-small">do something< /a>

First try:

{{#link-to "rent" rent}}

gives me a link to the ressource but I cannot specify a (css) class. In the docs I see that only the title attribute can be specified

Second try:

< a href="/#/rents/{{rend.id}}" class="btn btn-primary btn-small">do something< /a>

is also a bad idea, because Ember will add its helper tags [for automatic updates] in the href.

So what can I do?

ember.js Solutions


Solution 1 - ember.js

Use:

{{#link-to 'rent' rent class='btn btn-primary btn-small'}}Go to rent{{/link-to}}

As link-to is a view helper.

Solution 2 - ember.js

You can add classes just fine in {{#linkTo}} helpers, you just need to remember not to confuse ember.

Ember may think your class is the routeName of the params, I include the class after both params and routeName and it works fine.

{{#linkTo 'dashboard.screenshots' value.model class='thumbnail'}}
   ........
{{/linkTo}}

Produces

<a id="ember507" class="ember-view thumbnail" href="#/project-2/member-1/task-2/screenshot-30">
   .........
</a>

Solution 3 - ember.js

If you want manually construct something from variables - there is {{unbound}} helper in ember.js.

In yor case code will looks like:

<a href="/#/rents/{{unbound rend.id}}" class="btn btn-primary btn-small">
   do something
</a>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2016429View Question on Stackoverflow
Solution 1 - ember.jssly7_7View Answer on Stackoverflow
Solution 2 - ember.jsiConnorView Answer on Stackoverflow
Solution 3 - ember.jssashasimkinView Answer on Stackoverflow