I’m a little late to this party (vacationing with patchy Internet and only a mobile phone), but this sounds to me like you have reactive elements in your template, which aren’t fully resolved when the template onCreated fires. There are ways to solve this without hacks to the code.
Can we see the full template?
General Element Template
<template name="generalElement">
<div class="generalElementDiv">
{{#each mqttElementList}}
{{> mqttelement}}
{{/each}}
</div>
</template>
mqttelement Template
<template name="mqttelement">
<div class=' row' >
<div class="placerow">
<div class="elemplace">
<p> <i class="mdi mdi-map-marker"> </i> {{location}} </p>
</div>
{{#each element}}
<div class='row norightmargin elem'>
{{>elementtitle}}
{{>subelementrow}}
</div>
<div class="row">
<div class="divisorline"></div>
</div>
{{/each}}
</div>
</div>
</template>
Element Title Template
<template name="elementtitle">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 h-100 ">
<span class="dropup">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<div class="elemsize elementrow">
{{#if online}}
<i class="mdi mdi-wifi bigIcon"></i>
{{else}}
<i class="mdi mdi-wifi-off bigIcon"></i>
{{/if}}
<p class="card-category"><b>{{name}}</b> {{#if online}} Online {{/if}}{{#unless online}} Offline {{/unless}}</p>
</div>
</a>
<ul class="dropdown-menu zind">
{{#each variables}}
{{#if stats}} <li>{{name}} : {{value}} </li> {{/if}}
{{/each}}
</ul>
</span>
</div>
</template>
Sub Element Row (lists sub elements frrom the current element)
<template name="subelementrow">
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 h-100 ">
<div class="row norightmargin">
{{#each variables}}
{{>mqttsubelement}}
{{/each}}
</div>
</div>
</template>
Sub element: Value Display (informs data values, they can be either strings or numbers)
This one contains the class myCircle
<template name="valuedisplay">
<form class="valueform">
<div class="elemsize subelement">
<i class={{type}}></i> <small>{{name}} {{#unless discrete}} [ {{unit}} ]{{/unless}} </small>
<div class="valuediv">
{{#if discrete}}
<p class="elementDataBig">{{value}} </p>
{{else}}
<input class="myCircle" data-width="120" data-fgColor="#dddddd"
data-bgcolor="rgba(0,0,0,0.2)"
data-angleOffset=-125
data-angleArc=250
data-rotation=clockwise
data-type={{type}}
value="{{value}}">
{{/if}}
</div>
</div>
</form>
</template>
Sub Element: Relayform (renders a button for control purposes)
<template name="relayform">
<form class="relayform">
<a href="#" class='btn btn-primary align-middle relaybutton elemsize button gray alt h-100 w-100' data-toggle="tab" aria-expanded="true" name="relaybutton" id="relaybutton" role="button">
<i class='{{type}}'></i> {{name}} <p class="elementDataBig">{{value}} </p> </a>
<input type="hidden" name="topic" value={{topic}} />
<input type="hidden" name="message" value={{value}} />
</form>
</template>
Subr Element: dimmercontrol (renders a range input for dimmer control purposes)
<template name="dimmerform">
<form class="dimmerForm">
<div class="elemsize subelement">
<label for=dimRange><i class='{{type}}'> </i> <small> {{name}} : {{value}} {{unit}}</small>
<div class="ripple-container"></div></label>
<div class="dimmcontainer"><input type="range" min="0" max={{states}} value={{value}} class="slider " name="dimRange" id="dimRange"></div>
<input type="hidden" name="topic" value={{topic}} />
<input type="hidden" name="message" value={{value}} />
</div>
</form>
</template>
Plase let me know if you need more info
EDIT: btw, what you said makes a lot of sense to me, since the console.log($(’.myCirle’)) i’ve put in between sometimes returns an empty array, as sometimes returns only a part of them, or all of them, randomly.
Also If you know about AccountsTemplates, I created some extra fields as you register, but I don’t know how to get them after the user logs In, so to display the first and last name of the user (literally named them firstName and lastName), I’ve been reading but can’t find a way to get those variables.
That’s a lot of templates!
However, they look well nested and componentised, so I’m going to suggest what will hopefully be a quick win. Change your top-level generalElement template to:
<template name="generalElement">
<div class="generalElementDiv">
{{/if}}}}
{{#if Template.subscriptionsReady }}
{{#each mqttElementList}}
{{> mqttelement}}
{{/each}}
{{/if}}
</div>
</template>
and ensure you subscribe to the appropriate collections(s) in your generalElement.onCreated:
Template.generalElement.onCreated(function() {
this.subscribe('abc');
this.subscribe('xyz');
//...
});
Those changes will ensure nothing is rendered below the generalElement template until all subscriptions have data.
http://blazejs.org/api/templates.html for more info.
Sorry for the delay, it’s been a busy month and the universe is conspirating against my personal projects
Man!!! this works like a charm!
I commented the workaround function that I mentioned, and added your recomendations, and now it works!
I think I can finally say, this is now solved
Thanks for your great help everyone, and thanks @robfallows for this solution
There was an extra line {{/if}}, i guess it’s a typo, this is how it looks now
<template name="generalElement">
<div class="generalElementDiv">
{{#if Template.subscriptionsReady }}
{{#each mqttElementList}}
{{> mqttelement}}
{{/each}}
{{/if}}
</div>
</template>
Template.generalElement.onCreated(function() {
this.subscribe('mqttcollection');
});
