Svelte 可以像 Handlebars 一样用于模板吗？

Question

我的目标是让最终用户在我的应用程序中构建一些自定义功能。我可以做这样的事情吗？我知道这有时也称为液体模板，类似于handlebars.js 的工作原理。

应用程序.svelte

<script>
    let name = 'world';
    const template = '<h1> Hello {name} </h1>'
</script>

{@html template}

如果这个问题已经得到解答，我很抱歉，但我找不到它。

链接到 REPL。

Answer 1

如果模板应该是字符串，一种解决方案可能是{variable}在通过元素显示之前简单地将 替换为值{@html}>> REPL
请注意SVELTE 文档中的警告

Svelte 在注入 HTML 之前不会清理表达式。如果数据来自不受信任的来源，您必须对其进行清理，否则您的用户就会面临 XSS 漏洞。

（如果单独处理，在组件内部$$props可用于获取一个对象中传递的值）

<script>
    const props = {
        greeting: 'Hello',
        name: 'world'
    }

    let template = '<h1> {greeting} {name} </h1>'
    
    let filledTemplate = Object.entries(props).reduce((template, [key,value]) => {
        return template.replaceAll(`{${key}}`, value)
    },template)
            
</script>

{@html filledTemplate}

以前没有字符串的解决方案 为了实现这一目标，我将为每个模板构建一个组件，并使用一个<svelte:component>元素和一个开关来显示所选的一个> REPL
[App.svelte]

<script>
    import Template1 from './Template1.svelte'
    import Template2 from './Template2.svelte'  

    let selectedTemplate = 'template1'

    const stringToComponent = (str) => {
        switch(str) {
            case 'template1':
                return Template1
            case 'template2':
                return Template2
        }
    }
</script>

<button on:click={() => selectedTemplate = 'template1'}>Template1</button>
<button on:click={() => selectedTemplate = 'template2'}>Template2</button>

<svelte:component this={stringToComponent(selectedTemplate)} adjective={'nice'}/>

[模板.svelte]

<script>
    export let adjective
</script>
<hr>
<h1>This is a {adjective} template</h1>
<hr>