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();
}
});
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.
Aucun commentaire :
Enregistrer un commentaire