Несколько вещей, которые нужно знать ...
Обозначения префикса $ для хранилищ также работают для назначения нового значения доступному для записи хранилищу:
<script>
import { writable } from 'svelte/store'
const x = writable(0)
const onClick = () => {
$x = $x + 1
}
</script>
<button on:click={onClick}>+</button>
<span>{$x}</span>
Это также работает для записи в отдельную опору объекта или отдельные элементы в массиве:
<script>
import { writable } from 'svelte/store'
const x = writable({
count: 0,
})
const onClick = () => {
$x.count = $x.count + 1
}
</script>
<button on:click={onClick}>+</button>
<span>{$x.count}</span>
Из родительского компонента вы можете привязать переменную к опоре дочернего компонента:
Child.svelte
<script>
export let value
</script>
<input bind:value />
App.svelte
<script>
import Child from './Child.svelte'
let value = ''
$: console.log(value)
</script>
<Child bind:value />
Примечание: привязки работают, только если это та же переменная. То есть вы не можете поместить связанную переменную в промежуточную переменную и заставить Svelte отслеживать эту привязку. Svelte отслеживает отдельные свойства объектов (до тех пор, пока они ссылаются на изначально связанную переменную - с точечной нотацией), а также элементы массивов, особенно в {#each} циклах:
<script>
import { writable } from 'svelte/store'
const x = writable({
count: 0,
})
const y = writable([
{ count: 0 },
{ count: 1 },
])
const onClick = () => {
$x.count = $x.count + 1
}
</script>
<button on:click={onClick}>+</button>
<span>{$x.count}</span>
<hr />
{#each $y as item, i}
<div>
<button on:click={() => item.count++}>$y[{i}]: +</button>
</div>
{/each}
<pre>{JSON.stringify($y)}</pre>
Итак, зная все это, если вы поместите свои исходные данные в хранилище с возможностью записи и вы будете точны в своих двусторонних привязках, вы можете получить довольно дешевое решение своего вопроса ... (см. REPL)
stores.js
import { readable, writable, derived } from 'svelte/store'
// a big writable store
export const root = writable([
{
type: 'folder',
name: 'Important work stuff',
files: [{ type: 'file', name: 'quarterly-results.xlsx' }],
},
{
type: 'folder',
name: 'Animal GIFs',
files: [
{
type: 'folder',
name: 'Dogs',
files: [
{ type: 'file', name: 'treadmill.gif' },
{ type: 'file', name: 'rope-jumping.gif' },
],
},
{
type: 'folder',
name: 'Goats',
files: [
{ type: 'file', name: 'parkour.gif' },
{ type: 'file', name: 'rampage.gif' },
],
},
{ type: 'file', name: 'cat-roomba.gif' },
{ type: 'file', name: 'duck-shuffle.gif' },
{ type: 'file', name: 'monkey-on-a-pig.gif' },
],
},
{ type: 'file', name: 'TODO.md' },
])
App.svelte
<script>
import { root } from './stores.js'
import Folder from './Folder.svelte'
$: console.log($root)
</script>
<div class="hbox">
<div>
<!-- NOTE binding to the store itself: bind=files={root} -->
<Folder readonly expanded bind:files={$root} file={{ name: 'Home' }} />
</div>
<pre>{JSON.stringify($root, null, 2)}</pre>
</div>
<style>
.hbox {
display: flex;
justify-content: space-around;
}
</style>
Folder.svelte
<script>
import File from './File.svelte'
export let readonly = false
export let expanded = false
export let file
export let files
function toggle() {
expanded = !expanded
}
</script>
{#if readonly}
<!-- NOTE bindings must keep referencing the "entry" variable
(here: `file.`) to be tracked -->
<span class:expanded on:click={toggle}>{file.name}</span>
{:else}
<label>
<span class:expanded on:click={toggle} />
<input bind:value={file.name} />
</label>
{/if}
{#if expanded}
<ul>
{#each files as file}
<li>
{#if file.type === 'folder'}
<!-- NOTE the intermediate variable created by the #each loop
(here: local `file` variable) preserves tracking, though -->
<svelte:self bind:file bind:files={file.files} />
{:else}
<File bind:file />
{/if}
</li>
{/each}
</ul>
{/if}
<style>
span {
padding: 0 0 0 1.5em;
background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
background-size: 1em 1em;
font-weight: bold;
cursor: pointer;
min-height: 1em;
display: inline-block;
}
.expanded {
background-image: url(tutorial/icons/folder-open.svg);
}
ul {
padding: 0.2em 0 0 0.5em;
margin: 0 0 0 0.5em;
list-style: none;
border-left: 1px solid #eee;
}
li {
padding: 0.2em 0;
}
</style>
File.svelte
<script>
export let file
$: type = file.name.slice(file.name.lastIndexOf('.') + 1)
</script>
<label>
<span style="background-image: url(tutorial/icons/{type}.svg)" />
<input bind:value={file.name} />
</label>
<style>
span {
padding: 0 0 0 1.5em;
background: 0 0.1em no-repeat;
background-size: 1em 1em;
}
</style>
Однако учтите, что это может быть не самое эффективное решение.
Причина в том, что любое изменение в любой части магазина будет обнаруживаться как изменение всего магазина, и поэтому Svelte придется распространить и повторно подтвердить изменение для всех потребителей (компонентов) или этих данных. Мы не обязательно говорим о какой-то тяжелой обработке, потому что Svelte все еще знает граф данных и очень рано закоротит большую часть распространения очень дешевыми и хирургично направленными if тестами. Но все же сложность обработки будет линейно (хотя и медленно) расти с увеличением размера объекта в магазине.
В некоторых случаях, когда данные могут быть очень большими или что-то в этом роде (возможно, допускать ленивую выборку вложенных узлов?), Вы можете подробнее остановиться на методах, продемонстрированных в приведенных выше примерах. Например, вы можете ограничить алгоритмическую сложность (стоимость) обработки изменения, заключив рекурсивные узлы в свои данные (то есть опору files в приведенном выше примере) каждый в доступное для записи хранилище. Да, это будут магазины в магазинах (магазины высокого уровня?). Это, безусловно, было бы немного деликатно соединить вместе, но теоретически это даст вам почти бесконечную масштабируемость, потому что каждое изменение будет распространяться только на братьев и сестер затронутого узла, а не на все дерево.
person
rixo
schedule
02.12.2020
