每N個項目分解{{＃each}}塊

Question

我正在一個需要顯示用戶網格的流星項目中工作，如下所示：

在Django很容易，我會使用列表計數器並獲得其模數，如果模塊為0，那么我將關閉row div標簽並添加一個新的row div標簽。

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

但是當我嘗試在Meteor模板中執行此操作時：

Template.available_user_list.helpers({
  users: function () {
    return Meteor.users.find();
  },
  count: ()=>{
    return Meteor.users.find().count();
  },
  isModulo: function (dividend, divisor) {
    return dividend % divisor == 0;
  }
});

HTML

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

我收到以下錯誤：

=>錯誤阻止了啟動：
在處理帶模板的文件時（對於目標web.browser）：client / templates / lobby_page.html：14：意外的HTML關閉標記...如果是isModule標記。

我不能將模式用作Django。 如何每N個項目插入一個新行？

Answer 1

我對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>

Answer 2

您也可以使用索引。 檢查當前的文檔索引/計數器是否除以您的。 所以你的代碼就是這樣的。

<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">';
 }
});

所以基本上你只需要將@放在count之前並在divide之前增加計數值，因為它首次初始化為0。 不需要從helper定義任何計數/索引。 我希望這一切都能讓你感覺到。