Как я могу динамически определить привязку значений в Svelte?

Прежде всего, вы не можете иметь строку 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. Я бы не рекомендовал делать это таким образом.

Думаю, я нашел способ добиться желаемого результата. Ключевым моментом является использование функции Svelte производных хранилищ Svelte для фиксации отношений зависимости между полями. .

Вы можете использовать конструктор функций для создания функции из строки JSON (при таком подходе могут возникнуть проблемы с безопасностью - хотя и менее серьезные, чем eval(); в моем случае конфигурация формы является надежным вводом). Затем вы передаете эту функцию как обратный вызов в производную (), и Svelte автоматически переоценивает ее. при изменении входов.

Оттуда относительно просто определить компоненты Svelte, которые подписываются на стоимость магазина с помощью $.

Вот как выглядит мой stores.ts файл:

import { Writable, writable, derived } from 'svelte/store';
import { fields } from "./sample.json";

export const fieldMap: Map<string, Writable<number>> = new Map();

const computedFields = fields.filter((f) => f.computed);
const userFields = fields.filter((f) => !f.computed);

userFields.forEach((field) => {fieldMap[field.id] = writable(0)})

type JsonFunction = (values: number[]) => number;

for (const cf of computedFields) {
    const fromStatic = new Function(...cf.computed.args, "return " + cf.computed.body);
    const derivedFunction: JsonFunction = (values: number[]) => fromStatic(...values);
    const arg0: Writable<number> = fieldMap[cf.computed.args[0]];
    const moreArgs: Array<Writable<number>> = [];
    for (const arg of cf.computed.args.slice(1)) {
        moreArgs.push(fieldMap[arg]);
    }
    fieldMap[cf.id] = derived([arg0, ...moreArgs], derivedFunction);
};

С sample.json, который выглядит так:

{
  "fields": [
    {
      "label": "First value?",
      "id": "f1"
    },
    {
      "label": "Second value?",
      "id": "f2"
    },
    {
      "label": "Summed",
      "id": "f3",
      "computed": {
        "args": [
          "f1",
          "f2"
        ],
        "body": "f1 + f2"
      }
    },
    {
      "label": "Doubled",
      "id": "f4",
      "computed": {
        "args": [
          "f3"
        ],
        "body": "f3 * 2"
      }
    }
  ]
}

Обратите внимание, что для такого импорта напрямую из JSON требуется включение функции resolveJsonModule в Машинопись.

Здесь вы можете увидеть полный рабочий пример здесь, но Svelte REPL не похоже, еще поддерживает TypeScript. Мне пришлось удалить все аннотации типов и переименовать sample.json в sample.json.js (что несколько противоречит сути упражнения).