Javascript 使用把手如何将4个div包装成一排div？

我很难用措辞回答这个问题，所以我道歉。我正在使用Handlebar从JSON文件生成列表，我被卡住了。基本上，我生成的每4张卡都需要包装在一个行div中。下面是我尝试过的，但效果不太好

（使用咖啡脚本）

这是我的模板

{{#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}}

{{#每个数据}
{{{#everyOther@index 4}}
{{/每一个}}
{{this.jobTitle}}
{{{#everyOther@index 4}}
{{/每一个}}
{{/每个}}

---

因此，基本上在第一次迭代中，我希望它打开一个行div，在生成第四张“卡片”之后，我希望结束该行并开始一个新的行。谢谢你的帮助

在车把上，你想做的并不像在其他无逻辑的模板手上那样是一个好的练习。如果您在将数据传递给模板之前进行数据转换，而不是发明这种奇怪的助手，则效果会更好

如果首先尝试对数据分组，例如使用下划线.js：

然后，您的模板将如下所示：

{{#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}}

{{#每个数据}
{{{#每个这个}
{{jobTitle}}
{{/每个}}
{{/每个}}

---

这个模板更干净，更容易阅读，不是吗？

这个模板更干净！从视图中分离模型并显示下划线，这是一个很好的建议。

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}}