使用把手如何在行div中包裝4個div？

Question

我很難說這個問題，所以我很抱歉。我使用句柄從JSON文件生成列表，我卡住了。基本上我生成的每個4張牌都需要用行div來包裝。這是我試過，但沒有很好地工作

（使用的CoffeeScript）

Handlebars.registerHelper "everyOther", (index, amount, scope) -> 
    if index % amount 
    scope.inverse this 
    else 
    scope.fn this 

這裏是我的模板

{{#each data}} 
    {{#everyOther @index 4}} 
    <div class = "card-result-row"> 
    {{/everyOther}} 
    <div class = "card-result with-image"> 
     <img src="{{this.userImgUrl}}" alt="Contacts Image" /> 
     <div class="contact-info"> 
     <a href="{{this.userUrl}}"> {{this.user}}</a> 
     <span class="contact-title">{{this.jobTitle}}</span> 
     <span class="contact-email"><a href="mailto:{{this.email}}" title="Send Email">{{this.email}}</a></span> 
     <span class="meta-location"><a href="{{this.locLink}}">{{this.location}}</a></span> 
     </div> 
    </div> 
    {{#everyOther @index 4}} 
    </div> 
    {{/everyOther}} 
{{/each}} 

所以基本上在第一次迭代我希望它開行的div並且在生成第4張「卡片」後，我想關閉該行並開始新行。感謝您的幫助

Answer 1

與其他無邏輯模板相比，您在做什麼並不是一個好習慣。如果在將數據轉換爲模板之前進行數據轉換，而不是發明這種奇怪的助手，那將會更好。

如果您在使用underscore.js groupBy嘗試將數據分組第一，例如：

data = _.toArray(
    _.groupBy(data, function (item, index) { 
    return Math.floor(index/4); 
    }) 
); 

那麼你的模板將是這樣的：

{{#each data}} 
    <div class = "card-result-row"> 
    {{#each this}} 
     <div class = "card-result with-image"> 
     <img src="{{userImgUrl}}" alt="Contacts Image" /> 
     <div class="contact-info"> 
      <a href="{{userUrl}}"> {{user}}</a> 
      <span class="contact-title">{{jobTitle}}</span> 
      <span class="contact-email"><a href="mailto:{{email}}" title="Send Email">{{email}}</a></span> 
      <span class="meta-location"><a href="{{locLink}}">{{location}}</a></span> 
     </div> 
     </div> 
    {{/each}} 
    </div> 
{{/each}} 

此模板清潔，多容易閱讀不是嗎？