基於價值變化的Knockout foreach條件標籤

我有以下HTML/Knockout，我希望dayDividerdiv僅在有新日期時出現，即同一天的消息出現在日期標題下。通常我會將最後一個值保存在一個臨時變量中，並檢查每次。但我很新的淘汰賽，不知道從哪裏開始基於價值變化的Knockout foreach條件標籤

<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>

來源

2015-11-03 Flexicoder

怎麼樣的東西等;

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

（支架可能需要添加/移除到這個 - 我可以從不與淘汰賽!! rememeber）

來源

2015-11-03 14:50:19 Shawson

我需要格式化時間戳才能獲取日期部分？ – Flexicoder

嗯好點 - 是的，你可以將日期記入瞬間並用它來進行比較，如此; visible：$ index> 0 && moment（$ parent [$ index -1]（）。timestamp（））。diff（moment（timestamp（）），'days'）> 0 – Shawson

謝謝@Shawson它很接近但是它會出現的foreach不允許訪問父項中的其他元素和$索引所需（）的 – Flexicoder

$母體藥物則不能消息（）或SelectedConversation（）。相反，它是持有SelectedConversation（）的視圖模型。因此，如果你想追隨Shawson的建議，你可以試試：

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

這裏是展示如何使用內部的foreach $家長和$索引的例子的小提琴（注意父怎麼不在名單用於foreach）：https://jsfiddle.net/05r9pa6u/

所有這一切，這是在我的口味HTML過多的邏輯。你可能想考慮讓消息對象更聰明，所以他們知道什麼時候應該顯示日期div（順便說一下，誰擁有它們，以及它們應該顯示在右邊還是左邊等）。

來源

2015-11-03 18:22:46 Waggles

尼斯！我更新了小提琴，以回顧每一個元素 - 我試圖得到一個像這樣的例子，昨天在jsfiddle上工作了約20分鐘，然後憤怒退出了！ https://jsfiddle.net/05r9pa6u/1/ – Shawson

基於價值變化的Knockout foreach條件標籤

回答

相關問題