連接負面isDirty與禁用類

Question

有沒有辦法重構下面的代碼，使其更清潔或是最簡潔的方法來解決這個問題？

{{#if isDirty}} 
    <button {{action 'save' this}} class="btn">Save</button> 
    <button {{action 'discard' this}} class="btn">Discard</button> 
{{else}} 
    <button class="btn disabled">Save</button> 
    <button class="btn disabled">Discard</button> 
{{/if}} 

Answer 1

我喜歡用CSS來解決這個問題：

<button {{bindAttr class=":btn content.isDirty:enabled:disabled"}}>Save</button> 

你可以使用CSS禁用時，防止點擊次數（如果你的目標瀏覽器都支持它）。或者只是讓點擊通過，只有在content.isDirty時才調用commit/rollback。

另一種選擇是將按鈕的禁用屬性綁定：

<button {{bindAttr disabled="content.isDirty:enabled:disabled"}}>Save</button>