Meteor + Materialize: сбрасывается для каждого не работает

Question

У меня есть складной (материализующийся) элемент которого создается из for each, однако «выпадающее меню» не работает. Все, что не в for each работает.

Как исправить эту проблему?

jobList.html

<template name="jobList"> 
<ul class="collapsible" data-collapsible="accordion"> 
    {{#each jobs}} 
     <li> 
      <div class="collapsible-header">{{title}}</div> 
      <div class="collapsible-body"><p>{{description}}</p></div> 
     </li> 
    {{/each}} 
</ul> 

jobList.js

Template.jobList.rendered = function() { 
    $('.collapsible').collapsible({ 
     accordion: false 
    }); 
}; 

Template.jobList.helpers({ 
    jobs: function() { 
     return Jobs.find(); 
    } 
}); 

шаблоне jobList в другом шаблоне, который ничего не делает аппарт от необходимости {{> jobList}}.

Answer 1

Эта проблема относительно готовности DOM, когда вы выполняете инициализацию плагина jQuery, цикл {{#each}} еще не отобразил HTML-элементы.

Что вы можете сделать для решения этой проблемы - это определение отдельной функции для возврата курсора, который вы хотите перебрать, и наблюдать за этим курсором внутри autorun внутри обратного вызова вашего шаблона onRendered.

Когда мы обнаруживаем, что число курсоров изменено, это означает, что документ был добавлен (в частности, когда подписка готова и исходный набор документов сделал свой путь к клиенту) или удалены, запустите инициализацию плагина jQuery.

Важно, чтобы все оставшиеся недействительные вычисления заканчивались перед запуском инициализации jQuery, поэтому нам нужно использовать Tracker.afterFlush (мы не можем предсказать, в каком порядке отменены недействительные вычисления, мы можем выполнить только кода после выполнения этого процесса).

Это потому, что помощник, возвращающий наш курсор, тоже вычисляется и будет недействительным при добавлении или удалении документа, в результате чего вставка или удаление соответствующего подмножества DOM: тогда жизненно важно выполнить инициализацию плагина jQuery после того, как DOM-манипуляция будет сделанный.

function jobsCursor(){ 
    return Jobs.find(); 
} 

Template.jobsList.onRendered(function(){ 
    this.autorun(function(){ 
    // registers a dependency on the number of documents returned by the cursor 
    var jobsCount = jobsCursor().count(); 
    // this will log 0 at first, then after the jobs publication is ready 
    // it will log the total number of documents published 
    console.log(jobsCount); 
    // initialize the plugin only when Blaze is done with DOM manipulation 
    Tracker.afterFlush(function(){ 
     this.$(".collapsible").collapsible({ 
     accordion: false 
     }); 
    }.bind(this)); 
    }.bind(this)); 
}); 

Template.jobsList.helpers({ 
    jobs:jobsCursor 
});