Question

我有以下HTML / Knockout，我希望dayDivider div仅在有新日期时出现，即同一天的消息显示在日期横幅下。通常我会将最后一个值保存在临时变量中并每次都检查一下。但我对Knockout很新，不知道从哪里开始

<div data-bind="foreach: SelectedConversation().messages()" class="messages">
    <div class="row">
        <div class="dayDivider"><hr/><span class="center-block" data-bind="text: moment(timestamp()).format('D MMM')"></span></div>
        <!-- ko if: personId() === @Model.PersonId-->
        <div class="talk-bubble tri-right right-top pull-right border">
            <div class="talktext">
                <span class="pull-left messageTime" data-bind="text: moment(timestamp()).format('D MMM - HH:mm')"></span>
                <span class="pull-right messageFrom" data-bind="text: personFullName()"></span><br/>
                <span class="pull-right messageBody" data-bind="text: message"></span>
            </div>
        </div>
        <!-- /ko -->
        <!-- ko if: personId() !== @Model.PersonId-->
        <div class="talk-bubble tri-right left-top border">
            <div class="talktext">
                <span class="pull-right messageTime" data-bind="text: moment(timestamp()).format('D MMM - HH:mm')"></span>
                <span class="pull-left messageFrom" data-bind="text: personFullName()"></span><br/>
                <span class="pull-left messageBody" data-bind="text: message"></span>
            </div>
        </div>
        <!-- /ko -->

   </div>

Answer 1

怎么样;

<div class="dayDivider" data-bind="visible: $index > 0 && $parent[$index -1]().timestamp() !== timestamp()">

（括号可能需要添加/删除 - 我永远不会记得Knockout！）

Answer 2

$ parent不是messages（）或SelectedConversation（）。相反，它是持有SelectedConversation（）的视图模型。因此，如果您想遵循Shawson的建议，请尝试以下方式：

visible: moment($parent.selectedConversation().messages()[$index() - 1]().timestamp()).diff(moment(timestamp()), 'days') > 0

这是一个小提示，显示如何在foreach中使用$ parent和$ index的示例（请注意父级不是foreach中使用的列表）：https://jsfiddle.net/05r9pa6u/

所有这一切，根据我的口味，这在你的HTML中是太多的逻辑。您可能需要考虑使消息对象更智能，以便他们知道何时应显示日期div（顺便提一下，谁拥有它们，以及它们是否应显示在右侧或左侧等）。

敲除基于价值变化的条件标签

2 个答案: