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