如何使用內聯比較條件在徽章中應用類？

我想要做這樣的事情：如何使用內聯比較條件在徽章中應用類？

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

如何使用內聯比較條件在徽章中應用類？

回答

相關問題