使用 Handlebars 如何将 4 个 div 包装在一行 div 中？答案

【问题标题】：Using Handlebars how do I wrap 4 divs in a row div?使用 Handlebars 如何将 4 个 div 包装在一行 div 中？
【发布时间】：2014-08-30 12:30:07
【问题描述】：

我很难说出这个问题，所以我很抱歉。我正在使用把手从 JSON 文件生成列表，但我被卡住了。基本上我生成的每 4 张卡片都需要包装在一个行 div 中。这是我尝试过但效果不佳的方法

（使用咖啡脚本）

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，在生成第四个“卡片”之后，我想关闭该行并开始一个新行。感谢您的帮助

【问题讨论】：

标签： javascript html templates coffeescript handlebars.js

【解决方案1】：

在 Handlebars 中，您尝试做的不是像在其他无逻辑模板中那样的好习惯。如果在将数据传递给模板之前进行数据转换会更好，而不是发明这种奇怪的助手。

如果您尝试先对数据进行分组，例如使用 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}}

这个模板更简洁，更易于阅读，不是吗？

【讨论】：

模板干净多了！将模型与视图分离并显示 _underscore 的好建议。