Meteor jQuery plugins initialization by onRendered

Question

Why does this jQuery plugin initialization code not work unless I wrap it with setTimeout ?

When I use setTimeOut , everything is fine. Can you help me?

This doesn't work:

Template.checker_one_item_time.onRendered(function(){

    $('#time_custom_scroll').mCustomScrollbar({
        setHeight: 244,
        mouseWheel:{
            enable: true,
            axis: "y"
        }
    });
});

This works:

Template.checker_one_item_time.onRendered(function(){

    setTimeout(function(){
        $('#time_custom_scroll').mCustomScrollbar({
            setHeight: 244,
            mouseWheel:{
                enable: true,
                axis: "y"
            }
        });
    }, 2000)    
});

Answer 1

Are you rendering your template without waiting for any subscriptions it depends on to be ready? You may want to look at this pattern

Another example where you want to initialize a plugin when the subscription is done:

Template.listing.onRendered(function () {
  var template = this;

  template.subscribe('listOfThings', function () {
    // Wait for the data to load using the callback
    Tracker.afterFlush(function () {
      // Use Tracker.afterFlush to wait for the UI to re-render
      // then use highlight.js to highlight a code snippet
      highlightBlock(template.find('.code'));
    });
  });
});