Как связать атрибуты DOM с каждым элементом в коллекции Mongo

Question

Как я могу присвоить некоторые атрибуты HTML каждому элементу в коллекции Mongo в Meteor? Мой случай использования:

• У меня есть коллекция документов (PDF)
• Я хочу, чтобы отобразить палец для каждого из них
• На шаблоне, каждый документ представляет собой article.document, абсолютно расположенный
• Я хочу, чтобы присвоить значение math.random() для «верха» и «налево» для каждого article.document

Мой код: http://meteorpad.com/pad/bq6Ph5CQXMMejFQiF/DocumentList

документ-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> 

документ-list.js:

Template.documentList.helpers({ 
    documents: function() { 
    return Documents.find({}); 
    } 
}); 

Мои сомнения: где я должен сделать расчет для случайных значений элементов article.document и когда следует ли присваивать значения узлам DOM.

Спасибо!

Answer 1

Во-первых, вы должны выделить шаблон документа:

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

Теперь вы можете создать вынесенное функцию, которая будет вызываться для каждого документа, который оказанной в 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 
    }); 
}