在 Svelte 中每 x 次迭代关闭一个元素

Question

我正在尝试编写一个应用程序，其中每 3 个书签，Svelte 关闭行并开始一个新的行，允许行继续。我使用 sveltestrap 组件，这些是看到的“Row”、“Col”和“Card*”标签。

<Row>
    {#each bookmarks as bookmark, i}
        <Col>
        <Card class="mb-3">
          <CardHeader>{bookmark.title}</CardHeader>
          <CardBody>
            <CardSubtitle>{#each Array(parseInt(bookmark.rating)) as _, i}
                <img fill="#ffffff" src="/res/star-fill.svg" alt="Star">
            {/each}{#each Array(5 - parseInt(bookmark.rating)) as _, i}
            <img src="/res/star.svg" alt="Star">
            {/each}
            </CardSubtitle>
            <CardText>{bookmark.description}</CardText>
          </CardBody>
          <CardFooter>{bookmark.rating}</CardFooter>
        </Card>
    </Col>
    
    {#if (i % 3 === 0)}
    </Row>
    <Row>
    {/if}
    {/each}
    </Row>

关于关闭一个不存在的元素，这给了我一个错误，但我试图关闭它之前的行。 Svelte 有什么方法可以查看其数组中的前一个元素吗？

Answer 1

一个解决方案是将书签分成三个块，这样您就可以包装两个 #each 循环 - 一个用于行，一个用于具有匹配的开始和结束标记的列。
这是一个使用 this question >> REPL

中的块函数的示例

<script>
    const items = [1,2,3,4,5,6,7,8,9,10]

    function chunkArray (arr, size) {
        return arr.length > size
            ? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
        : [arr]
    }

    const groups = chunkArray(items, 3)
    console.log(groups)

</script>

{#each groups as items}
<div class="row">
    {#each items as item}
    <span class="column">{item}</span>
    {/each}
</div>
{/each}

就像评论一样，我会质疑 Row 组件并考虑这是否真的有必要，或者是否可能有 css 唯一的解决方案...

Answer 2

{#each Array(Math.ceil(bookmarks.length / 3)) as _, i}
    <Row>
        {#each bookmarks.slice(i * 3, i*3+3) as bookmark, j}
            <Col>
                <Card class="mb-3">
                    <CardHeader>{bookmark.title}</CardHeader>
                    <CardBody>
                        <CardSubtitle>
                            {#each Array(parseInt(bookmark.rating)) as _, k}
                                <img fill="#ffffff" src="/res/star-fill.svg" alt="Star">
                            {/each}
                            {#each Array(5 - parseInt(bookmark.rating)) as _, k}
                                <img src="/res/star.svg" alt="Star">
                            {/each}
                        </CardSubtitle>
                        <CardText>{bookmark.description}</CardText>
                    </CardBody>
                    <CardFooter>{bookmark.rating}</CardFooter>
                </Card>
            </Col>
        {/each}
    </Row>
{/each}

在 Svelte 中每 x 次迭代关闭一个元素

Closing an element every x iteration of each in Svelte

javascript

node.js

svelte