emblem.js: Link-to helper doesn't like class conditions

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.

About this issue

  • Original URL
  • State: closed
  • Created 10 years ago
  • Comments: 16 (1 by maintainers)

Most upvoted comments

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.