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>

我收到以下错误：

=＆GT;错误阻止了启动：
在处理带模板的文件时（对于目标web.browser）： client / templates / lobby_page.html:14：意外的HTML关闭标记 ......如果是isModule标签。

我无法将模式用作Django。如何在每个 N 项目中插入新行？

Answer 1

我对Meteor并不熟悉，但我会使用的模式是将数组拆分为你想要的大小的“块”，然后遍历div的每个块，然后遍历每个块用户：< / p>

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定义任何计数/索引。我希望这一切都能让你感觉到。

每N个项目分解{{＃each}}块

2 个答案: