Split cursor results in template

Question

I'd like to generate a template with something like this:

<ul>
 <li>A B C D</li>
 <li>E F G H</li>
</ul>

The data i'm providing to the template is a cursor that has 8 rows (one for each letter).

I know I could do a fetch and split the results in groups of 4, but if I'm not mistaken, the fetch is less efficient, if e.g. I update the value of A to 1, it reloads everything.

Any suggestion on how to do this is appreciated.

as far as I know, if `fetch()` is considered less efficient, it is for tasks where you don't require to really fetch the data, like a `cursor.count()`. The most known example is `if(Collection.findOne)` versus `if(Collection.find().count()>0)`. Since you display the data, I am not sure it makes a difference. — Billybobbonnet, Aug 06 '15 at 16:04
The whole point of reactive programming is to have the data be live. These kinds of in-place updates are blazingly fast, pun intended. Are you also trying to make these page elements non-reactive? If so see http://stackoverflow.com/questions/29197247/how-do-i-make-a-meteor-helper-non-reactive As far as returning the data in groups of 4, you can have your helper return an array of arrays, where each outer array element contains an array of 4 elements. — Michel Floyd, Aug 06 '15 at 16:21
@MichelFloyd thanks for the reply. I suppose you are talking about the Template.registerHelper? How would you do that? I usually apply the helpers at an individual level, and what I return is not html stuff. Thanks! — Artur Carvalho, Aug 07 '15 at 10:09

score 1 · Accepted Answer · edited May 23 '17 at 12:30

html:

<template name="outer">
  <ul>
    {{#each list}}
      {{> quadItem }}
    {{/each}}
  </ul>
</template>

<template name="quadItem">
  <li>{{#each quad}}{{item}} {{/each}}</li>
</template>

js:

Template.outer.helpers({
  list: function(){
    var arrayOfQuads = [];
    var array = myCollection.find().fetch();
    for ( var i = 0; i < array.length; i += 4 ){
      arrayOfQuads.push(array.slice(i,i+3));
    }
    return arrayOfQuads;
  }
});

Template.quadItem.helpers({
  quad: function(){
    return this;  // data context should be one row of arrayOfQuads
  },
  item: function(){
    return this; // data context should be one element of a quad
  }
});

This is very quick and dirty, I'm sure it can be made more elegant. For example see how to make an array element selectable by index in blaze.

Split cursor results in template

1 Answers1