Question

有没有办法重构以下代码以使其更清晰，或者{{#if}}是解决此问题的最简洁方法？

{{#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。

另一种选择是绑定按钮的disabled属性：

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

将负的isDirty与禁用的类连接

1 个答案: