Hello everyone,
Above all, I thank the people who will take the time to answer this subject and help me see it more clearly.
I’m French, I’m sorry if my English is far from perfect.
To start, I develop a web application under meteorJS, and I have a problem with a small system that is simple enough. I want to create a countdown system. For that I use the plugin https://hilios.github.io/jQuery.countdown/.
My html page looks like this:
<template name="horaire">
<div class="body">
<div class="grid">
<table class="horaire-arret">
<tbody>
<tr>
<th>Ligne {{countDown}}</th>
<th>Destination</th>
<th>Départ dans</th>
</tr>
{{#each depart }}
<tr>
<td><img src="/images/picto/{{numero_vehicule}}.jpg" alt="ligne"></td>
<td>{{nom_destination}}</td>
<td data-countdown="2019/01/01"></td>
</tr>
{{/each}}
<tr class="annuler">
<td><img src="/images/picto/11.jpg" alt="picto"></td>
<td>ANVERS <img src="/images/picto/picto-trafic.png" alt="info-trafic"></td>
<td>06 min</td>
</tr>
</tbody>
</table>
<div class="infos-trafic">
<div class="head-trafic">
<h1><img src="/images/picto/picto-trafic-jaune.png" alt="Alerte">INFOS TRAFIC<img src="/images/picto/picto-trafic-jaune.png" alt="Alerte"></h1>
</div>
<div class="body-trafic">
<p><img src="/images/picto/11.jpg" alt="11"> En raison de fortes manifestations, un retard de 5 minutes est à prévoir.</p>
<p><img src="/images/picto/20.jpg" alt="20"> En raison de fortes manifestations, un retard de 5 minutes est à prévoir.</p>
<p><img src="/images/picto/11.jpg" alt="11"> En raison de fortes manifestations, un retard de 5 minutes est à prévoir.</p>
<p><img src="/images/picto/11.jpg" alt="11"> En raison de fortes manifestations, un retard de 5 minutes est à prévoir.</p>
<p><img src="/images/picto/11.jpg" alt="11"> En raison de fortes manifestations, un retard de 5 minutes est à prévoir.</p>
</div>
</div>
</div>
<div class="pub">
<p>PUBLICITE FORMAT 1830 (970) X 250px</p>
</div>
</div>
</template>
and my js page to this:
import './horaire.html';
Meteor.subscribe('depart');
Template.horaire.helpers({
depart: () => {
return Depart.find();
}
});
Template.horaire.onRendered(() => {
$('[data-countdown]').each(function() {
let $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('%M min));
});
});
});
The problem is the following:
My code in horaire.js starts before my code which is in the loop {{#each}} of the horaire.html file is completely loaded, result nothing is displayed between the tags <td data-countdown="2019/01/01"></td>
!
Here is the structure of my meteorJs application:
- client
– compatibility
– lib
– stylesheets
- imports
– api
– modules
– startup
— both
— client
— server
– ui
— components
— layouts
— less
— pages
-
private
-
public
-
server
my files horaire.js and horaire.html are in : imports/ui/pages/
How to solve this problem?
Thanks