添加動態CSS用於EmberJS

我創造了這個觀點添加動態CSS用於EmberJS

{{#view Q.FlashView id="flash-view"}} 
<div class="row"> 
    <div class="small-11 small-centered columns"> 
    <div id="message" {{bindAttr class=":alert-box :radius"}} data-alert> 
     {{view.content.message}} 
     <a href="#" class="close">&times;</a> 
    </div> 
    </div> 
</div> 
{{/view}}

這一定義

Q.FlashMessage = Ember.Object.extend({ 
    type: "notice", 
    message: null, 
    isNotice: (function() { 
    return this.get("type") === "notice"; 
    }).property("type").cacheable(), 
    isWarning: (function() { 
    return this.get("type") === "warning"; 
    }).property("type").cacheable(), 
    isError: (function() { 
    return this.get("type") === "error"; 
    }).property("type").cacheable(), 
    isSuccess: (function() { 
    return this.get("type") === "success"; 
    }).property("type").cacheable() 
}); 

Q.FlashView = Ember.View.extend({ 
    contentBinding: "Q.FlashController.content", 
    classNameBindings: ["isNotice: secondary", "isWarning: alert", "isError: alert", "isSuccess: success"], 
    isNoticeBinding: "content.isNotice", 
    isWarningBinding: "content.isWarning", 
    isErrorBinding: "content.isError", 
    isSuccessBinding: "content.isSuccess",

我所試圖做的是使視圖顯示不同的類型，如果下面的CSS類注意例如有class =「警示框半徑通知」。

我不知道這是如何完成的，因爲它似乎這個classNameBindings不處理靜態內容。

我已經問過這個問題，其中我把代碼從原來的作者，coderberry.me/blog/2013/06/20/using-flash-messages-with-emberjs/

你可以看到原來的代碼出現。

在此先感謝

來源

2013-07-25 Mohammad Abu Musa

做一類=」信息」）？？？ – selvagsz

對於div id =「消息」，我想添加這些靜態類的動態類 –

您可以添加基於屬性要動態類添加無論對Q.FlashView（ID =「閃圖」），或者消息的div（ID

<div id="message" {{bindAttr class=":alert-box :radius view.isNotice:notice view.isWarning:warning"}} > 
    {{view.content.message}} 
     <a href="#" class="close">&times;</a> 
    </div>

來源

2013-07-26 08:48:03 selvagsz

這個解決方案正確。謝謝 –

不要你有classNamesBindings定義語法錯誤？

classNameBindings: ["isNotice: secondary", "isWarning: alert", "isError: alert", "isSuccess: success"],

它應該像這樣（沒有冒號後的空格）：

classNameBindings: ["isNotice:secondary", "isWarning:alert", "isError:alert", "isSuccess:success"],

和classNameBindings應與計算性的工作。如果沒有，你可以設置觀察者來改變靜態屬性。

來源

2013-07-26 07:24:52 chrmod

感謝您的幫助，顯然我的問題有點混淆了Selva-G的解決方案，正確的 –

添加動態CSS用於EmberJS

回答

相關問題