Question

我有一个静态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困惑？）

Answer 1

您可以使用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

将Svelte生成的节点注入静态DOM

1 个答案: