in Meteor.template.rendered how to make a call after everything is rendered (after the {{#each}} loop finishes) - meteor

Question

Hi I have this template
<template name="users">
{{#each user}}
<li id="{{_id}}">
<input type="checkbox" checked />
<span><select name="colorpicker">
{{#each color}}
<option value="{{mColorCode}}" {{selected ../mColor mColorCode}}>{{mColorName}}</option>
{{/each}}
</select>
</span>
<img width="40" src="data:image/png;base64,{{mImage}}" />
<span class="name">{{mUsername}}</span>
<p><span class="description">{{mDescription}}</span></p>
</li>
{{/each}}
</template>
What i want to do is after the template is rendered, i want to convert the dropdown to a colorpicker. I'm using a jquery plugin
Template.users.rendered = function(){
$('select[name="colorpicker"]').simplecolorpicker({picker: true});
}
The problem is sometimes its not working, (Sometimes the call is being made before the dom being ready.)
I want to call this plugin after everything is rendered. and not for each user added, how can i do this ?
Thanks

Answer 1

I've found Meteor to be a little funny with how often it renders templates, and jQuery functions can end up building up.
I've taken to adding console.log("users rendered"); to understand how many times and when the render callback is triggered.
One thing I've had some success with is wrapping that template inside another, and then tying the callback to the outside template. Something like this:
<template name="container">
{{> users}}
</template>
<template name="users">
{{#each user}}
<li id="{{_id}}">
<input type="checkbox" checked />
<span><select name="colorpicker">
{{#each color}}
<option value="{{mColorCode}}" {{selected ../mColor mColorCode}}>{{mColorName}}</option>
{{/each}}
</select>
</span>
<img width="40" src="data:image/png;base64,{{mImage}}" />
<span class="name">{{mUsername}}</span>
<p><span class="description">{{mDescription}}</span></p>
</li>
{{/each}}
</template>
And this just add the callback to the container
Template.container.rendered = function(){
$('select[name="colorpicker"]').simplecolorpicker({picker: true});
console.log("rendered");
}
Not totally sure why it works, but it has for me, hopefully someone can illuminate us both.

Answer 2

This is the solution that I used, it's also a hack if someone has a better solution please post it.
What i did was i put the rendered template in the callback of the subscribe of my collection.
So my code was something like this :
Meteor.subscribe('trackedUser',function(){
Template.users.rendered = function(){
......
}
}

Answer 3

I see this is a pretty old post, but since I had a problem and I think I've found a better way, here it is. The containing template will technically be rendered even while the contents are rendering. In my case I was trying to initialize a materialize modal. To make it work It had to do the following.
template.html
<div class="row" id="eventResults">
{{#each eventResults}}
{{> eventResult}}
{{/each}}
</div>
<template name="eventResult">
<div class="modal event" id="{{id}}">
<div class="modal-content">
...
and template.js
Template.eventResult.onRendered(function(){
this.$('.modal-trigger').leanModal();
By calling the code on the onRendered of the child element and using this.$('...'), the code doesn't get called multiple times for each element, just once each.