javascript - Meteor JS,将每N个项目拆分到自己的表中

标签 javascript html meteor

所以我有一些行,我将其放入表中。它们来自同一个来源,目前我正在以常规方式展示它们 -

  {{#each rows}}
   {{> rowTemplate}}
  {{/each}}

这给了我一个像这样的dom

<table class="ui table celled">
  <thead>
    ...
  </thead>
  <tbody>
    <tr>....</tr>
    <tr>....</tr>
    ...
  </tbody>
</table>

我想要做的是将它们分成 N 组,全部来自单个数据源。因此,如果 N = 6,则 dom 最终会看起来像 -

<table>
 //first 6 rows
</table>

<table>
 //next 6 rows
</table>

etc

这实际上被证明是相当棘手的。我一直在尝试首先使用自定义助手来完成它,如 described here ,但由于布局引擎的更改,它在最新版本的 meteor 中不起作用。

关于执行此操作的最佳方法有什么建议吗?

最佳答案

这是一个用于对文档进行分区的示例助手:

// returns an array of objects like:
// [{rows: [doc1...docn]}, {rows: [docn+1...docn+n]}]
var partitionTables = function(documents, tableSize) {
  var tables = [];
  _.each(documents, function(doc, i) {
    var tableNumber = Math.floor(i / tableSize);
    if (tables[tableNumber] == null)
      tables[tableNumber] = {rows: []};
    tables[tableNumber].rows.push(doc);
  });
  return tables;
};

Template.myTemplate.helpers({
  tables: function() {
    // fetch some documents - change this line for your app
    var documents = Collection.find().fetch();

    // partition the documents into an array of objects
    return partitionTables(documents, 6);
  }
});

您可以在模板中使用它,如下所示:

{{#each tables}}
  <table>
    <tbody>
      {{#each rows}}
        <tr>{{this}}</tr>
      {{/each}}
    </tbody>
  </table>
{{/each}}

关于javascript - Meteor JS,将每N个项目拆分到自己的表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30215587/

相关文章:

html - 如何在网络上显示iTunesconnect销售和财务报告?

javascript - 将字段与 id 匹配并插入数据 - meteor

javascript - MailChimp:为什么使用 javascript 的 PUT 方法返回 "Use PUT to insert or update list members"

javascript - 数组中嵌入文档的集合更新属性

javascript - 使用正则表达式检索字符串的特定部分

html - Jekyll网站无法使用 "github-pages"Jekyll插件正确将markdown和liquid转换为html

javascript - this.platform.is ("mobile") 为浏览器返回 true

html - 如何屏蔽div元素的下半部分

javascript - 使用 AppleScript/JavaScript 在大文本上提取 IP

javascript - 允许在 2 个字母数字之间使用可选连字符并限制空格的模式