Javascript 每N个项目分解一个{{#each}}块

我在一个meteor项目中工作，该项目需要显示一个用户网格，如下所示：

在Django中很简单，我将使用列表计数器并获取其模，如果模为0，那么我将关闭

行div

标记并添加一个新的

行div

标记

{% if forloop.counter|divisibleby:'2' %}
  </div>
  <div class="row">
{% endif %}

html

选择要聊天的人：
{{{#每个用户}}
{{>可用用户}
{{#如果isModulo计数为4}
{{/if}
{{/每个}}

我得到以下错误：

=>阻止启动的错误：
使用模板处理文件时（对于目标web.browser）： client/templates/lobble_page.html:14:意外的html关闭标记 ... 如果是模块标记

---

我不能把这个图案当作Django。如何才能每N个项目插入一行？

我对Meteor不是很熟悉，但我会使用的模式是将数组拆分为您想要的大小的“块”，然后循环每个div块，然后循环每个块用户：

Template.available_user_list.helpers({
  users: function () {
    return Meteor.users.find();
  },
  count: ()=>{
    return Meteor.users.find().count();
  },
  chunks: function(chunkSize) {
      var R = [];
      var users = Meteor.users.find();
      for (var i=0,len=users.count(); i<len; i+=chunkSize)
          R.push(users.slice(i,i+chunkSize));
          return R;
  }
});

<!-- display a list of users -->
<template name="available_user_list">
  <h2>Choose someone to chat with:</h2>
  {{#each chunk 4}}
      <div class="row">
          {{#each .}}
              {{> available_user}}
          {{/each}}
      </div>
  {{/each}}
</template>

Template.available\u user\u list.helpers({
用户：函数（）{
return Meteor.users.find（）；
},
计数：（）=>{
返回Meteor.users.find（）.count（）；
},
chunks：函数（chunkSize）{
var R=[]；
var users=Meteor.users.find（）；
对于（var i=0，len=users.count（）；i
可用用户}
{{/每个}}
{{/每个}}

您也可以使用索引进行此操作。检查当前文档索引/计数器是否除以您的值。因此，您的代码如下所示

<template name="available_user_list">
  <h2>Choose someone to chat with:</h2>
  <div class="row">
    {{#each users}}
      {{> available_user}}
      {{#if isModulo @index 4}}
        {{{innerDivs}}}
      {{/if}}
    {{/each}}
  </div>
</template>

Template.available_user_list.helpers({
  users: function () {
    return Meteor.users.find();
  },
  isModulo: function (dividend, divisor) {
    ++dividend;
    return dividend % divisor == 0;
  },
 innerDivs: function(){
         return '</div><div class="row">';
 }
});

选择要聊天的人：
{{{#每个用户}}
{{>可用用户}
{{#如果isModulo@index 4}
{{{innerDivs}}}
{{/if}
{{/每个}}
Template.available\u user\u list.helpers({
用户：函数（）{
return Meteor.users.find（）；
},
isModulo：函数（被除数、除数）{
++股息；
回报股息%除数==0；
},
innerDivs:function（）{
返回“”；
}
});

所以基本上你只需要把@放在count前面，在除法之前增加count值，因为它第一次初始化为0。不需要从helper定义任何计数/索引。

---

我希望所有这些都能让你明白。

问题在于

，元素应该关闭。标记不匹配。是的，我知道，但我需要做一些类似的事情。是的，但是，以这种方式放置

div

标记可以破坏我的meteor应用程序。我已经更新了我的答案，这可能会解决你的问题。

Template.available_user_list.helpers({
  users: function () {
    return Meteor.users.find();
  },
  count: ()=>{
    return Meteor.users.find().count();
  },
  chunks: function(chunkSize) {
      var R = [];
      var users = Meteor.users.find();
      for (var i=0,len=users.count(); i<len; i+=chunkSize)
          R.push(users.slice(i,i+chunkSize));
          return R;
  }
});

<!-- display a list of users -->
<template name="available_user_list">
  <h2>Choose someone to chat with:</h2>
  {{#each chunk 4}}
      <div class="row">
          {{#each .}}
              {{> available_user}}
          {{/each}}
      </div>
  {{/each}}
</template>

<template name="available_user_list">
  <h2>Choose someone to chat with:</h2>
  <div class="row">
    {{#each users}}
      {{> available_user}}
      {{#if isModulo @index 4}}
        {{{innerDivs}}}
      {{/if}}
    {{/each}}
  </div>
</template>

Template.available_user_list.helpers({
  users: function () {
    return Meteor.users.find();
  },
  isModulo: function (dividend, divisor) {
    ++dividend;
    return dividend % divisor == 0;
  },
 innerDivs: function(){
         return '</div><div class="row">';
 }
});