meteor template content fully loaded callback

Question

I've a template like below

<template name="mainEvents">
    <section class="main-events-list events-list js-content-slider">
        {{#each events}}
            <div class="events-list-item">
                <figcaption>
                    <dl class="clearfix">
                        <dt>
                        <h3>{{name}}</h3></dt>
                    </dl>
                </figcaption>
                <figure class="ratioBox">
                    <div class="js-backstretch content"><img src="{{image}}"/></div>
                </figure>
                <a href="" class="full-link"></a>
            </div>
        {{/each}}
    </section>
</template>

a simple helper like below

Template.mainEvents.helpers({
   "events": function () {
       return Events.find({is_deleted:false})
   }
})

and lastly a simple iron-route like below:

Router.route('/slider', {
    name: 'mainEn',
    path: '/slider',
    template: 'slider',
    layoutTemplate: 'mainLayout',
    yieldRegions: {
        'indexHeader': {to: 'header'},
        'footer': {to: 'footer'}
    },
    onBeforeAction: function () {
        //TAPi18n.setLanguage('en'); // set to english
        this.next();
    },
    action: function () {
        // render all templates and regions for this route
        this.render();
    }
});

Template.mainEvents.rendered = function () {
    $('.js-content-slider').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
    });
}

As you can guess i'm trying to generate a slider with the data came from the collection and trying to do it with Slick package.

Template.mainEvents.rendered function works well when roaming between routes. Suppose my slider is in /slider route and i load the meteor app by entering localhost:3000 and then click /slider button. everything works as it's should.

But when try to load the page with localhost:3000/slider route. rendered function triggers before the content fully loaded and slick fails. I manage to work it only by setTimeout function.

How can i get the all content in a template fully loaded and rendered callback in meteor ?

I need $('.selector').load(function () {}) like function.

or any other that can solve this issue.

Thanks in advance.

where do you call slick? Maybe it would help to show your rendered function — Christian Fritz

Christian Fritz Christian Fritz · Accepted Answer · 2015-05-06T17:09:27

This is most probably an issue with the collection not having synced yet. You can fix that by adding a waitOn option to your route:

Router.route('/slider', {
    name: 'mainEn',
    path: '/slider',
    template: 'slider',
    layoutTemplate: 'mainLayout',
    yieldRegions: {
        'indexHeader': {to: 'header'},
        'footer': {to: 'footer'}
    },
    onBeforeAction: function () {
        //TAPi18n.setLanguage('en'); // set to english
        this.next();
    },
    action: function () {
        // render all templates and regions for this route
        this.render();
    },
    waitOn: function () {
        return Meteor.subscribe('events');
    }
});

meteor template content fully loaded callback

1 Answers