Add class to ember link-to

Question

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?

Daniel · Accepted Answer · 2016-08-06 14:12:09Z

110

Use:

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

As link-to is a view helper.

edited Aug 6, 2016 at 14:12

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

answered Jan 27, 2013 at 22:38

sly7_7

12k3 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2016429 Over a year ago

awesome! I didn't knew I could add view attributes to the helpers.

irruputuncu Over a year ago

This does not work in version 1.13.7 of ember anymore as it fails to add the ember-view class, without wich it will just be a normal link and reload the page. Using just class="btn btn-primary etc" as proposed in Connors answer below works as expected.

sly7_7 Over a year ago

Thanks for the heads up

iConnor · Accepted Answer · 2013-11-13 20:46:12Z

11

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>

answered Nov 13, 2013 at 20:46

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

Comments

iConnor · Accepted Answer · 2013-12-24 19:05:39Z

1

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>

edited Dec 24, 2013 at 19:05

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

answered Apr 16, 2013 at 14:33

sashasimkin

371 silver badge3 bronze badges

1 Comment

user1952811 Over a year ago

You should be using {{#link-to}} helper.

Collectives™ on Stack Overflow

Add class to ember link-to

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related