时间戳

首页 > 解决方案 > 如何在 Svelte 中动态定义“值”绑定？

svelte - 如何在 Svelte 中动态定义“值”绑定？

问题描述

我是 Svelte 的新手，我正在尝试使用它来编写一个单页应用程序，该应用程序将显示一个表单，其中包含一些基于其他字段动态计算的字段值。理想情况下，我想使用静态 JSON 配置文件来驱动表单的呈现（以便使用其他输出 JSON 的工具轻松生成新表单）。

我希望能够动态定义表单字段之间的关系，以便当用户输入值时，计算字段会自动重新计算。

我想得到与此类似的东西（但显然这不起作用）：

<script>
let objFormConfig = JSON.parse(`{
    "formElements": [
        {
              "id": "f1",
              "label": "First value?"
        },
        {
              "id": "f2",
              "label": "Second value?"
        },
        {
               "id": "f2",
               "label": "Calculated automatically",
               "computed": "f1 + f2"
        }
    ]
}`);
</script>
<form>
{#each objFormConfig.formElements as item}
    <div>
        <label for="{item.id}">{item.label}
        {#if item.computed}
            <input type=number id={item.id} value={item.computed} readonly/>
        {:else}
            <input type=number id={item.id} bind:value={item.id}/>
        {/if}
        </label>
    </div>
{/each}
</form>

现场（非工作）REPL 示例在这里。

谁能指出我正确的方向？或者，如果这完全不可能，您能否提出不同的方法？

我的一个想法是将字符串键放入映射中，然后字符串名称引用被调用以计算结果的函数，但这感觉很笨重

标签： sveltesvelte-3

解决方案

首先，你不能有一个字符串，f1 + f2或者ct1.fValue==''，将它传递给{ expression }, bind:, class:,并期望它能够工作。use:on:

因为 Svelte 不是这样工作的。

Svelte是一个编译器。

当你写

<!-- expression -->
{ name + name }

<!-- or bind: -->
<input bind:value="{name}" />

<!-- or dynamic attribute -->
<input disabled="name === ''" />

<!-- or many more -->

REPL

如果您查看编译后的输出 JS，您将看不到name + name字符串name或name === ''. 在那里使用的任何变量都会被分析和转换。

您可以阅读我的博客“Compile Svelte in your Head”以了解更多信息。

现在，关于如何使这项工作的任何建议，我首先建议修改为 JSON 配置文件（如果可能）：

例如，如果您有：

{
  "formElements": [
    {
      "id": "f1",
      "label": "First value?"
    },
    {
      "id": "f2",
      "label": "Second value?"
    },
    {
      "id": "f2",
      "label": "Calculated automatically",
      "computed": {
        "type": "sum",
        "variables": ["f1", "f2"]
      }
    }
  ]
}

然后您可以通过以下方式实现派生字段：

<input type=number id={item.id} value={compute(item.computed)} readonly/>

你可以看看这个REPL

如果无法修改 formConfig，则您必须自己解析和评估表达式。

解析 + 评估表达式的过度简化示例：REPL。我不建议这样做。

推荐阅读