如何在 Svelte 中动态设置布尔属性?

Sco*_*ttM 6 svelte

第一次尝试:

<button type="submit" class="button" {{#if isDirty(item)}}disabled{{/if}}>Save2</button>
Run Code Online (Sandbox Code Playgroud)

在编译期间导致错误:

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>
                                                                               ^
Run Code Online (Sandbox Code Playgroud)

我能想到的最好的:

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

Ric*_*ris 12

Svelte '修复' HTML 以便disabled属性(和其他布尔属性)表现得更加理智:

<button type="submit" class="button" disabled='{isDirty(item)}'>Save</button>
Run Code Online (Sandbox Code Playgroud)

演示在这里。

编辑:将示例和演示更新为 Svelte 3

  • 重要的是,“isDirty(item)”函数仅在使用绑定参数调用时才有效。在上面的示例(和演示)中,该变量是“item”。因此,像“isDirty()”这样的简单函数是行不通的。 (2认同)