Link-to helper doesn't like class conditions

[dodeja]

I am trying to use class conditions with a link-to helper, but fails on compilation.

link-to view.linkName lnid urlSlug itemprop="url" class={view.isSelected:selected view.icon} doesnt work.

link-to view.linkName lnid urlSlug itemprop="url" class=view.isSelected:selected doesnt work either.

a href="#" class={view.isSelected:selected view.icon} works fine.

[machty]

How would you write what you're trying to do in Handlebars?

[emaillenin]

+1

Unable to assign class name to a Anchor tag generated by link-to helper.

Handlebar way of doing it (http://stackoverflow.com/questions/14552911/add-class-to-ember-link-to)

{{#link-to "rent" rent classNames="btn btn-primary btn-small"}}Go to rent{{/link-to}}

Tried to do it in emblem.js like this (none worked):

link-to.class-name link-to class=class-name link-to (class=class-name) link-to {class=class-name}

[bnetter]

Same problem here :+1:

[krezka]

Without condition you can easily add class, after link-to (space is required). Look here: https://github.com/machty/emblem.js/issues/73 Example: link-to .class-name rent rent

[tmosmant]

+1 a fix would be much appreciated.

[renatocarvalho]

+1

[Leooo]

+1

[Leooo]

the following works (with test a CP defined in the controller):

= link-to 'authenticated.profile' curProfile.slug classNameBindings="test" class="greenable_pill"
  | Your profile

But I can not manage to use an inline helper: this doesn't work

= link-to 'authenticated.profile' curProfile.slug classNameBindings="if true 'active_tutorial' ''" class="greenable_pill"
  | Your profile

neither does classNameBindings="{{if true 'active_tutorial' ''}]" nor classNameBindings=(if true 'active_tutorial' '') nor `class="{{if true 'active_tutorial' ''}}"

[thec0keman]

Inside mustache you need to use Ember's inline if:

= link-to linkName lnid urlSlug itemprop="url" class=(if isSelected selected)
=>
{{link-to linkName lnid urlSlug itemprop="url" class=(if isSelected selected)}}

Some things to keep in mind:

• { } are for wrapping things in mustache. In a link-to you are already in a mustache context, so these won't work.
• Binding things to class or classNames is very different than classNameBindings. The inline approach should still work for the latter.
• with the latest versions of Emblem, colon syntax gets mapped to the inline if for html tags but not mustache:

a class=isActive:active:not   =>   <a class={{if isActive 'active' 'not'}}></a>

I'm pretty sure the old colon syntax of isActive:active:inactive is not supported anymore by Ember.

[Leooo]

ok got it thanks, class=(if ..) works, but then I can't add fixed classes so I have to do someting like that:

  = link-to 'authenticated.profile' curProfile.slug class=(if true 'active_tutorial tutorial-hover-own tutorial-hover-own-home greenable_pill' 'tutorial-hover-own tutorial-hover-own-home greenable_pill')
    | Your profile`

A bit cumbersome, but it works. -1

[thec0keman]

What if you mixed class and classNames?

= link-to 'admin' class='tutorial-hover-own tutorial-hover-own-home greenable_pill' classNames=(if isActive 'active_tutorial')

I'm pretty sure classNames is the preferred path, but that should still work.

[Leooo]

I had an assertion failed error with your proposal (~ Only array of static class names allowed for classNames), but putting the dynamic classes into class= works, thanks:

  = link-to 'admin' classNames='tutorial-hover-own tutorial-hover-own-home greenable_pill' class=(if isActive 'active_tutorial')

[kandebonfim]

+1 please. OCD coder here!

[kandebonfim]

link-to .navtest 'dashboard' | Click me

Worked for me!

But I detected one more issue related to that: https://github.com/machty/emblem.js/issues/282

[thec0keman]

One thing to help debug these sorts of issues is to first figure out what the handlebars should look like, so you can determine if it is Ember upset with the syntax or if Emblem is doing something wrong.

I believe what we want is the following:

{{#link-to 'admin' classNames='tutorial-hover-own tutorial-hover-own-home greenable_pill' class=(if isActive 'active_tutorial')}}test{{/link-to}}

That does appear to work correctly in Ember.

I did some tests on the latest Emblem, and the following work:

 = link-to 'test' 'admin' classNames='tutorial-hover-own tutorial-hover-own-home greenable_pill' class=(if isActive 'active_tutorial')

= link-to 'admin' classNames='tutorial-hover-own tutorial-hover-own-home greenable_pill' class=(if isActive 'active_tutorial')
  |test   

However this appears to be broken:

= link-to 'admin' classNames='tutorial-hover-own tutorial-hover-own-home greenable_pill' class=(if isActive 'active_tutorial') test   

I'll take a look at why it is getting confused in the latter case. Does this line up with your experience?

[thec0keman]

Actually, that latter case is expected. Components / helpers should be able to receive single arguments, and so without a | or a new-line there is no way to know when the helpers parameters end.

@Leooo @kandebonfim could you confirm if the above examples work for you? Or is there a variation that is not working?

Thanks!