внедрение сгенерированных Svelte узлов в статический DOM - PullRequest
Новая
       30

внедрение сгенерированных Svelte узлов в статический DOM

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

У меня есть статический HTML-файл, и я хочу дополнить его динамическими компонентами Svelte: 

<ul id="list">
    <li>first</li>
    <!-- dynamic list items should be added in between static ones -->
    <li>last</li>
</ul>

(Это упрощенный пример; «первый» и «последний» элементы более сложные, повторяющиесягенерировать их в Svelte не вариант.) 

import List from "./List.svelte";

new List({
    target: document.querySelector("#list"),
    props: {
        items: ["foo", "bar"]
    }
});

<script>
let items;
</script>

{#each items as item}
<li>{item}</li>
{/each}

Это добавляет динамические элементы в конец списка. Есть ли идиоматический, декларативный способ вставить их в середину вместо этого?

Единственное решение, о котором я могу думать, - это громоздкие, не декларативные манипуляции с DOM: 

<script>
import { onMount } from "svelte";

let items;

onMount(() => {
    let container = ref.parentNode;
    container.removeChild(ref);
    // manually change order
    let last = container.querySelectorAll("li")[1];
    container.appendChild(last);
})
</script>

<span bind:this={ref} hidden />

{#each items as item}
<li>{item}</li>
{/each}

(ядаже не уверен, что это верно, потому что span элементы не допускаются как прямые ul потомки, плюс ручное отбрасывание ref может сбить с толку Svelte?)

1 Ответ

1 голос
/ 10 ноября 2019

Вы можете использовать опцию anchor для монтирования компонента рядом с конкретным узлом: 

import List from "./List.svelte";

const target = document.querySelector("#list");
const anchor = target.lastChild; // node to insert component before

new List({
    target,
    anchor,
    props: {
        items: ["foo", "bar"]
    }
});

Демонстрация: https://svelte.dev/repl/1a70ce8abf2341ee8ea8178e5b684022?version=3.12.1

Полный API документирован здесь: https://svelte.dev/docs#Client-side_component_API

...