流星模板內容滿載回調

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功能在路由之間漫遊時工作良好。假設我的滑塊位於/ slider路徑中，並輸入localhost：3000加載meteor應用程序，然後單擊/滑塊按鈕。一切正常，因爲它應該。

但嘗試加載頁面localhost：3000 /滑塊路由。在內容完全加載並且滑動失敗之前觸發渲染的函數。我設法只通過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'); 
    } 
});