如何在 Svelte 中动态设置布尔属性？答案

【问题标题】：How can I set a boolean attribute dynamically in Svelte?如何在 Svelte 中动态设置布尔属性？
【发布时间】：2018-01-06 10:54:18
【问题描述】：

第一次尝试：

<button type="submit" class="button" {{#if isDirty(item)}}disabled{{/if}}>Save2</button>

编译时出错：

bundling...
????   (svelte plugin) Error: (28:75) Expected >
26:         <div class="row">
27:           <!-- FIXME Can't set an attribute dynamically? -->
28:           <button type="submit" class="button" {{#if isDirty(item)}}disabled{{/if}}>Save2</button>
                                                                               ^

我能想到的最好的：

{{#if isDirty(item)}}
  <button type="submit" class="button" disabled>Save</button>
{{else}}
  <button type="submit" class="button">Save</button>
{{/if}}

【问题讨论】：

标签： svelte

【解决方案1】：

Svelte '修复' HTML 以便 disabled 属性（和其他布尔属性）表现得更加健全：

<button type="submit" class="button" disabled='{isDirty(item)}'>Save</button>

Demo here.

编辑：将示例和演示更新到 Svelte 3

【讨论】：