流星模板内容满载回调

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.

你可以猜测我正在尝试生成一个滑块,数据来自集合,并尝试使用Slick包。

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.

在路由之间漫游时,Template.mainEvents.rendered函数运行良好。假设我的滑块位于/滑块路径中,我通过输入localhost:3000然后单击/滑块按钮加载流星应用程序。一切都按照应有的方式运作。

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.

但是当尝试使用localhost:3000 / slider路由加载页面时。在内容完全加载和光滑失败之前渲染函数触发器。我设法只通过setTimeout函数来工作。

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

如何在模板中完全加载和渲染回调中的所有内容?

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

我需要$('。selector')。load(function(){})就像函数一样。

or any other that can solve this issue.

或任何其他可以解决这个问题。

Thanks in advance.

提前致谢。

1 个解决方案

#1

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:

这很可能是集合尚未同步的问题。您可以通过向路由添加waitOn选项来解决此问题:

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');
    }
});