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.

score 1 · Accepted Answer · answered Apr 22 '15 at 19:23

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}

answered Apr 22 '15 at 19:23

Kevin Jhangiani

1,597
2
13
23

thank you. seems like a feature waiting to be made into a pull request =] Right now, I would have to make like 16 extra properties just for one page, as the conditions and string values vary. – ahnbizcad Apr 22 '15 at 19:48
It is highly annoying, I agree with you completely. The devs for handlebars seem to be pretty against it, but having used a lot of different templating systems, I find it extremely restrictive. I understand the separation of code logic from presentation, but in any app of decent complexity, you are going to need some more complex conditions for presentation... no one is asking for evals, but if ==, >, =>, !=, <, <= would definitely be useful. It can be done with a helper (some stackoverflow posts about it), but imo the syntax is just ugly, esp compared to how pretty emblem is normally – Kevin Jhangiani Apr 22 '15 at 23:31

score 1 · Answer 2 · answered Sep 20 '16 at 11:38

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.

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

2 Answers2