0

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

4

1 回答 1

3

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

于 2019-11-10T15:35:06.367 回答