Meteor JS,将每N个项目拆分成自己的表格

时间:2015-05-13 13:01:34

标签: 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中工作。

有关最佳方法的建议吗?

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

{{#each rows}}

该块的上下文是整个行集。将上下文更改为“6行数组”的数组。

即。 var sixRowBlock = [[1,2,3,4,5,6], [1,2,3,4,5,6]]

然后你可以做这样的事情。

{{#each sixRowBlock}}
    <table>
        {{#each this}}{{/each}}
    </table>
{{/each}}