如何在 svelte {#each ...} 块中反转顺序答案

【问题标题】：How to reverse the order in svelte {#each ...} block如何在 svelte {#each ...} 块中反转顺序
【发布时间】：2019-12-19 01:03:52
【问题描述】：

是否可以颠倒项目在 svelte 的 {#each ...} 块中的显示顺序？

我想要一个对象数组，按 id 排序，最旧的条目排在第一位。我想先显示最新的条目。

编辑：为了说明使用 .reverse() 解决方案时会发生什么，这里是“之前”和“之后”过渡屏幕：

【问题讨论】：

我可能有另一种选择；在将原始数组馈送到 {#each ..} 块之前先反转原始数组，但我认为在显示时进行反转可能更容易。

标签： javascript svelte-3

【解决方案1】：

查看我尝试过的文档：

<script>
    let cats = [
        { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
        { id: 'z_AbfPXTKms', name: 'Maru' },
        { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
    ];
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
    {#each [...cats].reverse() as { id, name }, i}
        <li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
            {i + 1}: {name}
        </a></li>
    {/each}
</ul>

似乎有效...试试看here

[...cats].reverse() 的原因是我们避免反转实际的猫数组，而只是反转一个副本

【讨论】：

我工作，是的，第一次渲染数组。但是，看看“过渡”示例（我已将其用作“模型”） - 好吧，在过渡后，原始顺序会恢复，这不是我想要的！
嗯，很有趣。因为它每次淡入时都会反转数据。会玩
{#each [...cats].reverse() as { id, name }, i}
不，使用带有 [... ] 的副本并不能解决问题。不幸的是。
我觉得如果你需要做更多的工作，那么它属于你所说的脚本标签，保持视图和逻辑分开

【解决方案2】：

答案是，通过在 {#each} 中进行 tweeking 来实施解决方案是困难的，也许是不可能的。就像 dbramwell 建议的那样，我在脚本中完成工作。代码可能需要一些改进/重构！

function reverseTodos() {
    let indexArr = [];
    for (const todo of todos) {
      indexArr.push(todo.id);
    }
    indexArr.reverse();

    let myNewArr = [];
    for (let i = 0; i < todos.length; i++) {
      myNewArr[i] = {
        id: indexArr[i],
        todo: todos[i].todo,
        checkbox: todos[i].checkbox
      };
    }
    return myNewArr.reverse();
  }

  $: reversedTodos = reverseTodos();

然后我将 reversedTodos 提供给 {#each} 块。

【讨论】：

我刚刚发现这个提议的解决方案不是最好的！因为现在，在更改元素的 id 之后，不可能删除（也可能编辑）单个元素。我认为应该保留原来的ids，将新的ids添加到reversedTodos中。然后我可以使用“新 ids”索引元素，同时保留原始 ids！
还有另一个问题...我按照之前的描述更改了代码；我可以在控制台中看到项目已删除，但现在更新后的数组未按原样显示在屏幕上。