如何进行内联比较条件以在徽章中应用 class？

Question

我想做这样的事情：

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

我在这里使用属性，看看它是否匹配一个值，而不是一个简单的布尔值。

这个的有效标志语法是什么？语法文档仅针对布尔属性条件显示此内容，并且执行类似我的示例的操作会导致浏览器错误和编译错误。

Answer 1

不幸的是，车把和徽章都只适用于布尔值。我不同意这个设计决定，但是你必须跳过一些步骤来添加帮助程序来处理它们，即使这样语法也不是很干净。

AFAIK，唯一的方法是通过 bool 属性.

在你的控制器中：

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

在您的模板中：

li class={aPropertyAlpha:active}

Answer 2

此答案是针对以下人添加的评论：ahnbizcad 您也可以将此列表项放入组件中，并使用如下内容：

#list-item.emblem

'Raw text'

#list-item.coffee

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

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

然后你可以像这样从父视图在循环中调用它：

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

希望对遇到类似问题的人有所帮助。

如何进行内联比较条件以在徽章中应用 class？

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

css

ternary-operator

emblem.js