Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The trouble lies in trying to add invalid HTML (<code>&lt;/div&gt;&lt;div class=row&gt;</code>). Even as a DocumentFragment, it's not valid (in general, difference between a Document and DocumentFragment is that a Document can only have a single document element (root node, like <code>&lt;html&gt;</code> for example), whereas a DocumentFragment can have multiple document elements).</p> <p>So, when Spark tries to process your string and stuff it in the DOM, it gets automatically corrected. It's beyond Spark's control too, the browser DOM does that.</p> <p>What you'll need to do is do an each nested within another each. The first will iterate over rows, the second over the columns for that row.</p> <p>Some pseudo-code:</p> <pre><code>{{#each rows}} &lt;div class="row-fluid"&gt; {{#each posts row}} &lt;div class="span3"&gt; {{&gt; postItem}} &lt;/div&gt; {{/each}} &lt;/div&gt; {{/each}} Template.postsList.rows = function () { // 1. Get cursor of posts (cursor = posts.find({...}); // 2. Get count from cursor (count = cursor.count()); // 3. Divide count by desired columns per row, then Math.ceil it (I think!) // 4. Return an array of objects each containing a "row" key, with some various values (current row probably, count, etc) }; Template.postsList.posts = function (row) { // Return a cursor of posts that is offset and limited (see meteor docs) based on values found in the row object }; </code></pre> <p>Hope that's enough to get you going.</p> <p><em>EDIT</em>: In step 3 (divide count by desired columns per row), you could potentially have this number come from the template instead so you're not mixing those details between code and templates. For example: <code>{{#each rows 4}}</code>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload