如何根據流星排序的兩個不同模板顯示兩個不同的模板

Question

我幾乎是初學者，我正在使用Meteor作爲我們在工作中用於UX測試的快速原型。 （用戶體驗設計師編碼，耶）。

現在，這裏是問題，我有兩個模板集合：Comments和Tasks。我想要顯示按創建日期排序的這兩個組合視圖。現在我只能以首秀的意見後，簡單地做展示的任務，各自的模板：

<template name="yourTemplate"> 
    {{#if comments.count}} 
     {{#each comments}} 
      {{> comment}} 
     {{/each}} 
    {{else}} 
     <li class="empty"> 
      <h1>No comments yet :(</h1> 
      {{#if currentUser}} 
       <p>Why don't you <span class="write-comment">write one?</span></p> 
      {{else}} 
       <p>Log in to write a new one.</p> 
      {{/if}} 
     </li> 
    {{/if}} 
    {{#each tasks}} 
     {{> task}} 
    {{/each}} 
</template> 

有沒有辦法簡單地「統一」的觀點？我正在客戶端上做所有事情，沒有任何服務器端的東西，也沒有安全性，因爲它全部在測試系統上本地完成，主持人坐在測試主題旁邊，所以我將它放在了不安全的位置，然後自動發佈，原型。

我想一種方法是將評論和任務放入一個數組中，並在顯示之前將它排序在那裏，但這仍然是被動的並且工作嗎？我也失去了我不得不說的語法。

在此先感謝您的幫助。

Answer 1

正如你所提到的，你可以寫一個幫手，將兩者結合起來。由於它是幫助程序，因此如果您查詢該幫助程序中的集合（或任何反應性數據源），它將是被動的。

Template.yourTemplate.helpers({ 
    items: function() { 
     // get comments and tasks - Add appropriate query properties to filter results 
     var comments = Comments.find({}).fetch(); 
     var tasks = Tasks.find({}).fetch(); 

     //Add a property to each comment object to identify whether an item is a comment or task 
     comments = _.map(comments, function (obj) { 
      obj.isComment = true; 
      return obj; 
     }); 

     //combine comments and tasks into single array 
     var items = comments.concat(tasks); 

     //sort combined array by creation date 
     items = _.sortBy(items, function (item) { 
      return item.creationDate; //edit this based on your requirement 
     }); 
     return items; 
    } 
}); 

然後在你的模板

<template name="yourTemplate"> 
    {{#if items.count}} 
     {{#each items}} 
      <!-- This is the property that we have added in helper --> 
      {{#if this.isComment}} 
       {{> comment}} 
      {{else}} 
       {{> task}} 
      {{/if}} 
     {{/each}} 
    {{else}} 
     <li class="empty"> 
      <h1>No comments and tasks yet :(</h1> 
      {{#if currentUser}} 
       <p>Why don't you <span class="write-comment">write a comment?</span></p> 
      {{else}} 
       <p>Log in to write a new comment.</p> 
      {{/if}} 
     </li> 
    {{/if}} 
</template> 

希望它能幫助。