JS - ループ内の最初のelseにテキストを表示します。

Question

forループを使用しています。その内部にはifelse ifが使用されています。

ループは、基本的にメッセージを表示します。まず、30日以内に到着したメッセージが表示され、30日以上経過したメッセージが表示されます。

しかし、私は私がelse if内にこれを置けば、それは私の質問はどのように私は、テキストのみを表示することができ、あるelse if

 _.forEach(this.collection.models, function(model, index){ 

      <% 
      var createdDateTime= new Date(created_at); 
      var currentDateTime= new Date(); 
      var difference = Math.round((createdDateTime- currentDateTime)/(1000 * 60 * 60 * 24)) 

      if(difference > -30) { %> 
      <div class="notification-box <%- read != true ? 'unread' : '' %>" data-type="<%- deeplink_type %>" data-id="<%- deeplink_id %>"> 
       <p class=""><%- message %></p> 
       <p class="light-grey-text datetime-text" style="margin-top:0.5em;"><%- created_at %></p> 
      </div> 
      <% } else if(difference < -30) { %> 

      <div class="blue banner server-banner" style="min-height: 25px; width: 100%; color: #fff; font-size: .7em; text-transform: uppercase; text-align: center; padding-top: 10px;"> 
       The following notifications are older than 30 days 
      </div> 

      <div class="notification-box <%- read != true ? 'unread' : '' %>" data-type="<%- deeplink_type %>" data-id="<%- deeplink_id %>"> 
       <p class=""><%- message %></p> 
       <p class="light-grey-text datetime-text" style="margin-top:0.5em;"><%- created_at %></p> 
      </div> 
      <% } %> 
     }); 

内のすべてのメッセージの一番上に現れ始めるThe following notifications are older than 30 daysを言っ分圧器を配置する必要があります私はelse ifの最初の反復でしたいです。

Answer 1

の内側に、ここで私はそれを行うだろう方法です。そのelse if状態に少なくとも1回入ったことを知るにはブール値が必要です。 else if内のこのブール値を使用すると無視されます。最初に入るときにtrueに設定されます。

var isAlreadyDisplayed = false; 
_.forEach(this.collection.models, function(model, index){ 

     <% 
     var createdDateTime= new Date(created_at); 
     var currentDateTime= new Date(); 
     var difference = Math.round((createdDateTime- currentDateTime)/(1000 * 60 * 60 * 24)) 

     if(difference > -30) { %> 
     <div class="notification-box <%- read != true ? 'unread' : '' %>" data-type="<%- deeplink_type %>" data-id="<%- deeplink_id %>"> 
      <p class=""><%- message %></p> 
      <p class="light-grey-text datetime-text" style="margin-top:0.5em;"><%- created_at %></p> 
     </div> 
     <% } else if(difference < -30 && !isAlreadyDisplayed) { 
     isAlreadyDisplayed = true;   
     %> 
     <div class="blue banner server-banner" style="min-height: 25px; width: 100%; color: #fff; font-size: .7em; text-transform: uppercase; text-align: center; padding-top: 10px;"> 
      The following notifications are older than 30 days 
     </div> 

     <div class="notification-box <%- read != true ? 'unread' : '' %>" data-type="<%- deeplink_type %>" data-id="<%- deeplink_id %>"> 
      <p class=""><%- message %></p> 
      <p class="light-grey-text datetime-text" style="margin-top:0.5em;"><%- created_at %></p> 
     </div> 
     <% } %> 
    }); 

Answer 2

条件を満たすために真偽スイッチを使用してください。その条件に基づいて、違いがソートされた順序であれば、メッセージを入力できます。

Answer 3

ブールチェックを追加します。 forEachの

var isFirst = true; 

前に定義し、それ以外の

if(isFirst) { 
    isFirst = false; 
    //output html 
}