Question

我有一个如下的模板

<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>

下面的简单助手

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

最后一个简单的铁路如下：

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

您可以猜测我正在尝试使用来自该集合的数据生成一个滑块，并尝试使用Slick包进行此操作。

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

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

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

我需要$('.selector').load(function () {})之类的功能。

或任何其他可以解决此问题的方法。

提前致谢。

Answer 1

这很可能是该系列尚未同步的问题。您可以通过在路线中添加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');
    }
});

流星模板内容满载回调

1 个答案: