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

Question

我很难对问题进行措辞，所以我深表歉意。我正在使用 handlebars 从 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

与在其他无逻辑模板程序中一样，您尝试在 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}}

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