如何使用内联比较条件在徽章中应用类？

我想要做这样的事情：如何使用内联比较条件在徽章中应用类？

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

我在哪里使用属性，如果它的值相匹配看到，而不是一个简单的布尔。

这是什么有效的徽章语法？语法文档只显示布尔属性条件，并做类似于我的示例导致浏览器错误和编译错误。

来源

2015-04-22 ahnbizcad

不幸的是，车把和标志都只能在布尔值上使用。我不同意这个设计决定，但你必须跳过一些箍来添加帮助器来处理它们，即使如此，语法也不是很干净。

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

在你的控制器：

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

在模板：

li class={aPropertyAlpha:active}

来源

2015-04-22 19:23:36

谢谢。看起来像一个等待被拉入请求的功能=]现在，我只需要为一个页面创建16个额外的属性，因为条件和字符串值会有所不同。 – ahnbizcad

这非常讨厌，我完全同意你的看法。手柄的开发者似乎对此很反感，但是使用了很多不同的模板系统，我觉得它非常具有限制性。我理解代码逻辑与演示的分离，但在任何体面复杂的应用程序中，您将需要一些更复杂的演示条件......没有人要求演示，但如果==，>，=>，！ =，<，<=肯定会有用。它可以用一个帮助器（一些关于它的stackoverflow文章）来完成，但是语法只是丑陋的，特别是与通常的美丽标志相比 –

这个答案是对的评论添加：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

希望能帮助有类似问题的人。

来源

2016-09-20 11:38:12

如何使用内联比较条件在徽章中应用类？

回答

相关问题