Как лучше всего реализовать совместно используемую модель данных в представлениях Svelte - PullRequest
Новая
       59

Как лучше всего реализовать совместно используемую модель данных в представлениях Svelte

0 голосов
/ 17 октября 2019

У меня есть созданное представление, содержащее форму, элементы управления которой связаны со свойствами объекта Model, который также используется другими представлениями). Я пытаюсь выяснить, действительно ли необходимо или рекомендуется использовать парадигму Store.

Например, модель будет выглядеть примерно так: 

model = { 
   foo: undefined,
   bar: undefined,
   baz: undefined
}

... и пользовательский интерфейс будет иметь различныевходы, привязанные к модели через что-то вроде этого: 

//example.svelte
<script>
   import { exampleModel } from "./models.js";
</script>

<h2>Has foo?</h2>
<label for="input_foo_t">yes</label>
<input id="input_foo_t" type="radio" bind:group={exampleModel.foo} value={true}/>

<label for="input_foo_f">no</label>
<input id="input_foo_f" type="radio" bind:group={exampleModel.foo} value={false}/>

<h2>Has bar?</h2>
<label for="input_bar_t">yes</label>
<input id="input_bar_t" type="radio" bind:group={exampleModel.bar} value={true}/>

<label for="input_bar_f">no</label>
<input id="input_bar_f" type="radio" bind:group={exampleModel.bar} value={false}/>

В идеале я хотел бы сохранить тезисы как единое целое. Из всех примеров, которые я вижу, ничего подобного нет. Является ли намерение Svelte Stores предоставлять супер гранулированные, совместно используемые данные, чтобы мы в основном «хранили» одно значение? Или есть примеры, которые показывают что-то вроде объекта Model, используемого в парадигме магазина? Я пропускаю какой-то процесс жизненного цикла, которым мне нужно воспользоваться, используя Svelte Store (сродни англусскому дайджесту)?

1 Ответ

3 голосов
/ 18 октября 2019

Вы, конечно, можете использовать магазин для этого: 

// models.js
import { writable } from 'svelte/store';

export const exampleModel = writable({
  foo: undefined,
  bar: undefined,
  baz: undefined,
});

//example.svelte
<script>
   import { exampleModel } from "./models.js";
</script>

<h2>Has foo?</h2>
<label for="input_foo_t">yes</label>
<input id="input_foo_t" type="radio" bind:group={$exampleModel.foo} value={true}/>
<!-- etc -->

Сказав это, лучше не иметь огромных моделей, потому что изменениеодно свойство приведет к проверке всех его зависимостей (т. е. если вы измените $exampleModel.foo, ссылки на $exampleModel.bar также будут обновлены, поскольку в отношении Svelte $exampleModel - это то, что изменилось). Обычно это не настоящая проблема, но об этом нужно знать. Альтернатива, которая этого избегает, должна иметь более детализированные значения: 

// models.js
export const foo = writable();
export const bar = writable();
export const baz = writable();
...