Problem startup "$.material.init();" in "fezvrasta:bootstrap-material-design" with "Flow Router"?

help
1

I try to use fezvrasta:bootstrap-material-design in my project, and init the package like this

// client
Meteor.startup(function () {
    // This command is used to initialize some elements and make them work properly
    console.log('startup');
    $.material.init();
});

FlowRouter.route('/', {
    name: 'home',
    action: function (params, queryParams) {
        console.log('router');
        BlazeLayout.render('layout', {content: 'index'});
    }
});

But the router is startup before the Meteor.startup();
And then I tried to use

FlowRouter.wait();
Meteor.startup(function () {
    // This command is used to initialize some elements and make them work properly
    console.log('startup');
    $.material.init();
    FlowRouter.initialize();
});

But it don’t work.
Please help me.

2

It don’t work with button animate.

3

Sorry if this too late but just incase someone needs this still; the issue is that you’ve put the $.material.init() in the wrong place. It should be placed in the template’s onRendered method as follows.

Template.signIn.onRendered(function(){
    $.material.init();
});
4

I have many templates, so not good to do this.
Could init for all templates?

5

As far as I know, that’s the way the people designed it to work. Remember it was original designed for “normal” web pages; that load their entire page once. With Meteor things are different; templates are created and destroyed every time something happens and this requires that init function to be called every time a template is displayed anew.

I have been doing this in all of my templates. I don’t like it but from what else is out there I like bootstrap material design, at least for now.

6

For this I put it in the onRendered of my layout template, instead of each template individually.