Svelte是否具有渲染功能或自定义模板帮助程序

Question

Svelte附带了#if和#each之类的东西。用户如何进行任意模板逻辑？

例如，React和Vue都支持使用函数来定义UI树，Ember有Handlebars助手。

更新

举一个更具体的例子；每三行应该有一个深灰色的背景，除非它包含一张照片">

查看此评论

Answer 1

好吧，您有@html指令，它允许您在普通字符串中注入html。基本上，当使用指令时，类似<和>都没有逃脱。我为你创建了一个REPL。

<script>
const text = "This is some <strong>bold</strong> statement"
</script>
<div>{text}</div> // This is some <strong>bold</strong> statement
<div>{@html text}</div> // This is some bold statement

Answer 2

更新问题的答案
你直接把逻辑放在svelte。。这里有一个repl，它实现了您描述的逻辑。

<script>
let things = [
{name: 'item1', photo: false},
{name: 'item2', photo: false},
{name: 'item3', photo: false},
{name: 'item4', photo: false},
{name: 'item5', photo: false},
{name: 'item6', photo: true},
];
</script>
<style>
.dark-gray-background {
background-color: #222222;
color: #ffffff
}
</style>
<ul>
{#each things as thing, index}
<li class="{(!((index+1) % 3) && !thing.photo) ? 'dark-gray-background' : ''}">{thing.name}</li>
{/each}
</ul>