javascript - 如何在 knockout foreach 中附加到现有元素而不是创建新元素

Question

这是一个有点小众的案例，但我有一个简单的聊天室风格的场景。

因此，将会有一个可观察的聊天条目数组(这可能会限制为 100 个条目，这些条目会被分页以保持良好的性能)。

所以当前的 foreach 看起来像:

<!-- ko foreach: ChatEntries -->
<div class="chat-entry">
    <img class="entry-sender"></span>
    <span class="entry-content" data-bind="html: Content"></span>
</div>
<!-- /ko -->

目前，对于每个条目，它都会添加一个新的聊天条目，这很好，如下所示:

但是，如果下一个帖子是同一个人发布的，现在需要仅附加到现有的聊天条目，就像这样(原谅可怕的油漆工作)。

我不知道如何在 knockout 中做到这一点...我想我可以做一个 afterRender 并检查它是否与上一个条目海报相同，然后删除所有创建的 dom 并找到上一个条目并使用jquery或其他东西只是附加元素，但这感觉非常hack-ish，因为我手动操作dom。

那么有什么好的方法来解决这个问题吗？

==编辑==

只是为了澄清一些事情，目前，每当有新条目进入时，我总是附加到可观察数组，但是有一个论点是每次新条目进入时都重新创建数组，因为这会简化事情相当多，但不确定这样做与仅附加单个条目相比的可见影响。

目前在截止点之后有一个大约 50 的缓冲区，因此主数组存储大约 100 个，然后将允许另外 50%(最多 150 个条目)，然后一旦超过这个值，它将切断最后 50 个条目，并且重新创建数组，因此再次有 100 个条目，然后用户可以返回查看以前的条目。所以这减少了娱乐性，但听起来最终可能会变得更加复杂。所有传入的聊天内容都存储在本地存储中，因此可以快速分页，无需服务器，因此不必担心丢失聊天数据。

Answer 1

您可以将一些 knockout if 与 $index() 函数一起使用。

这不是最优雅的解决方案，但它很简单并且可以完成工作。

<!-- ko foreach: ChatEntries -->
<div class="chat-entry">
    <!-- ko if: $index() === 0 -->  //first item does not have a previous
        <span class="entry-sender">img</span>
        <span class="entry-content" data-bind="html: Content"></span>
    <!-- /ko -->
    <!-- ko if: $parent.ChatEntries()[$index()-1]-->    //check if previous is same user
        <!-- ko if: user !== ($parent.ChatEntries()[$index()-1].user)-->    
        <span class="entry-sender">img</span>
        <span class="entry-content" data-bind="html: Content"></span>
        <!-- /ko -->
        <!-- ko if: user === ($parent.ChatEntries()[$index()-1].user)-->    
        <span class="entry-content" data-bind="html: Content"></span>
        <!-- /ko -->
    <!-- /ko -->
</div>
<!-- /ko -->

看看 fiddle here

这也可以通过计算字段来完成，但它需要一些 JavaScript 代码并且需要您更改模型。此解决方案只需要更改 html