How to do an inline comparison condition to apply a class in emblem?

Question

I want to do something like this:

li class={aProperty=="alpha":active} Plain Text

where I am using a property, and seeing if it matches a value, as opposed to a simple boolean.

What is the valid emblem syntax for this? The syntax docs only show this for boolean property conditions, and doing something like my example results in browser errors and compile errors.

Answer 1

Unfortunately handlebars and emblem both only work on Booleans. I disagree with this design decision, but you have to jump through some hoops to add helpers to handle them, and even then the syntax isn't very clean.

AFAIK, the only way to do this is via a bool property.

In your controller:

aPropertyAlpha: function() { 
  return this.get('aProperty')==='alpha'; 
}.property('aProperty')

In your template:

li class={aPropertyAlpha:active}

Answer 2

This answer is for the comment added by: ahnbizcad You can also put this list item into the component, and use something like:

#list-item.emblem

'Raw text'

#list-item.coffee

tagName: 'li'
classNameBindings: ['activeItem']

activeItem: Ember.computed 'aProperty', ->
  if @get('aProperty') == 'alpha'
    return 'active'
  else
    return ''

Then you can call it in the loop from the parent view like this:

ul
  each availableProperties as |property|
    list-item aProperty=property

Hope that will help someone with similar problems.