Meteor + materializes: reset for everyone doesn't work
I have a resettable (materialize) item which is being created from for each
, however the "dropdown" menu is not working. Anything that isn't in for each
works.
How can I fix this problem?
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();
}
});
The template jobList
is in another template that does nothing from {{> jobList}}
.
source to share
This issue has to do with DOM readiness, when you do jQuery plugin initialization, the loop {{#each}}
hasn't rendered HTML elements yet.
What you can do to solve this problem is to define a separate function to return the cursor you want to iterate over and watch that cursor inside your template autorun
callback onRendered
.
When we find that the number of cursors has changed, it means that the document has been added (specifically when the subscription is ready and the original set of documents has made its way to the client) or removed, and we must re-initialize the jQuery plugin.
It is important to wait for all other current invalid computations to finish before running jQuery initialization, so we need to use Tracker.afterFlush
(we cannot predict in what order the invalid computations are canceled, we can only execute the code after this process has run).
This is because the helper returning our cursor is also a computation and will be invalid when the document is added or removed by inserting or deleting the appropriate subset of the DOM: then it is vital to initialize the jQuery plugin after the DOM manipulation is done.
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
});
source to share