Dynamic Template injection and Materialize 'tooltipped' css class

help
1

Guys

I’m an absolute beginner in Meteor. I am using kadira’s FlowRouter (rather than Iron Router) and am also using Materialize css (materialize:materialize) on atmosphere. And I ran into this issue … so given that i got this rendering taking place in the route …

FlowRouter.route('/', {
    name:'home',
    action(){
        BlazeLayout.render('parent' main: 'child });
    }
});

The parent template looks like …

<template name="parent">
    {{> Template.dynamic template=main}}
</template>

and the child template looks like …

<template name="child">
    <div class="animated slideInLeft collection with-header tooltipped" data-position="bottom" data-delay="50" data-tooltip="this is an example of a tooltip">
        <!--some content in here --> 
    </div>
</template>

Now this is weird. If i load the template directly (so WITHOUT using BlazeLayout.render within FlowRouter … the tooltip (class ‘tooltipped’) works fine. When i dynamically inject the template inside the other template (as specified above), the tooltip does not work anymore. All events and wiring up and other javascript works fine. Only the tooltip does not work! Any idea what might be causing the issue?

2

After hours to figure out what the f*** was wrong, I realised that it was just not getting initialised on time. So template.onRendered() did the trick and initialised the elements using some JQuery. Likewise you could add the CSS class in the onRendered to attain the same exact effect. Hope this helps to anyone who encountered a similar problem. onRendered is your friend!