How to associate DOM attributes to each item in Mongo Collection - meteor

Question

How can I give some HTML attributes to each item in a Mongo Collection in Meteor? My use case is:
I have a collection of documents (pdfs)
I want to display a thumb for each of them
On the template, each document is an article.document which is absolutely positioned
I want to assign a Math.random() value for the "top" and "left" for each article.document
My code: http://meteorpad.com/pad/bq6Ph5CQXMMejFQiF/DocumentList
document-list.html:
<template name="documentList">
{{#each documents}}
<article class="document {{#if active}}active{{/if}}">
<header class="document-header">
<div class="document-avatar btn-floating lighten-3"></div>
</header>
</article>
{{/each}}
</template>
document-list.js:
Template.documentList.helpers({
documents: function() {
return Documents.find({});
}
});
My doubt is: where should I do the calculation for the random values of the article.document elements and when should I assign the values to the DOM nodes.
Thanks!

Answer 1

First, you should separate out the document template:
<template name="documentList">
{{#each documents}}
{{> document}}
{{/each}}
</template>
<template name="document">
<article class="document {{#if active}}active{{/if}}">
<header class="document-header">
<div class="document-avatar btn-floating lighten-3"></div>
</header>
</article>
</template>
Now you can create a rendered function that will be called for each document that's rendered into the DOM:
Template.document.rendered = function() {
var $article = $(this.find('article'));
// Add the position attributes etc. using JQuery
$article.css({
position: "absolute",
top: 10, left: 10
});
}