I am following the recommendation to do subscriptions on the template level. Of course, the transfer of the data to the client may take some time. Also, I have to do some additional calculations until everything is ready for rendering.
Hence, I am using a {{#with}} statement to trigger re-rendering of my data once everything is ready, like this:
{{#with something}}
<div id="description">{{description}}</div>
{{/with}}
In this case, ‘description’ is some text property of the something object.
Inside an .autorun(), I am waiting for the data, and as soon as everything is ready, I assign this data to a ReactiveVar, which is then returned as ‘something’ by a helper like this:
something: function() {
return Template.instance().something.get();
}
This works so far, everything is rendered as expected as soon as the data becomes available.
The problem occurs if I have to also initialize a jQuery plugin to modify the DOM after the rendering. In my example, I have a plugin that shortens the description text to a certain limit of characters.
I assumed that I could trigger this jQuery plugin in an .autorun() like this:
Template.myTemplate.onRendered(function() {
var instance = this;
instance.autorun(function() {
if (instance.something.get()) {
// do the jQuery call
}
});
});
In fact, this .autorun() will be triggered, but it runs too early, i.e. before Blaze has actually rendered the {{description}}.
Hence, I changed my HTML to this:
{{#with something}}
<div id="description">{{description}}</div>
{{trigger}}
{{/with}}
and put the jQuery initialization into this trigger helper like this:
trigger: function() {
var something = Template.instance().something.get();
if (something) {
... do the jQuery call
}
}
but also in this case, the jQuery call is done too early.
So, is there any way to run a DOM manipulation after all data on the page has actually being rendered completely?
