Inline comparison conditions for ternary class

[ahnbizcad]

You can do something like

li class={boolean:active} plain text

But how can I do something like this?

li class={string=="desiredValue":active} plain text

I couldn't find anythign like this on the docs.

[theazureshadow]

I don't think either Emblem or Handlebars supports arbitrary expressions in templates. The best short-term approach is probably to create a computed property.

{
  menuItems: ['apple', 'banana', 'cucumber'],
  selectedMenuItem: 'apple',
  menuItemsState: function() {
    var selected = this.get('selectedMenuItem');
    return this.get('menuItems').map(function(item) {
      return {
        name: item,
        active: item === selected
      };
    });
  }.property('menuItems', 'selectedMenuItem')
}

However, the new HTMLBars helpers will solve this issue. Depending on when/how support is added in Emblem, you could probably do something along these lines:

export default Ember.Helper.helper(function equal(params) {
  return params[0] == params[1];
}

li class=(equal string "desiredValue"):active plain text

[thec0keman]

There is a pull request that adds inline if syntax that works very similarly to your suggestion: li class={ if (equal string "desiredValue") 'active' } plain text

[thec0keman]

I believe this was fixed in #234