Yes I’ve read the docs but cannot grasp what’s the practical difference. Can someone maybe give a couple of usage examples? Thanks!
1 Like
You would use onCreated to instantiate certain template instance properties, like reactive data sources. You would also do subscriptions on there mostly.
You would use onRendered most likely to call some third party library initialization code (jQuery UI stuff for example) that depends on your template to be rendered already.
5 Likes
First off: I haven’t needed the onCreated() hook yet. The practical meaning of that hook is that it gets called only once, when the template is first created, i.e. once per full page load/reload. I suppose you could do something like inject another js library that you know is going to be used only if this template gets loaded, like, let’s say, d3.js, and you don’t want to always load it up front. But… I don’t think many of us do that kind of thing, with Meteor packages being so great and doing all the loading for you.
But onRendered() is indeed very useful, you’ll need that one all the time. Like, let’s say, you’re using semantic-ui, including its form components, and for every template that contains a form you need to set up things like validation rules for that particular form. So here’s some real code (though simplified) from one of my apps in production:
Template.adminCoupons.onRendered(function () {
this.$('.ui.form').form({
code: {
identifier: 'code',
rules: [
{
type: 'empty',
prompt: 'Please enter value'
}
]
},
rebatePercent: {
identifier: 'rebatePercent',
rules: [
{
type: 'integer',
prompt: 'Please enter integer value'
}
]
}
}, {
onSuccess() {
// do something with the submitted form
}
});
// XXX
this.$('.code .button').click(function (e) {
Meteor.call('generateCouponCode', function (err, code) {
Session.set('code', code);
});
e.stopPropagation();
return false;
});
});
See that one ‘XXX’ there? Yes, I just realized that I’ve been, for some reason, circumventing the Meteor event handling (Template.abc.events()) for some reason and setting up my own, through jQuery directly. The rationale for that escapes me right now, and if there’s no good reason you should always be preferring Meteor’s event handling setup, but it’s still a valid example of what you can do with the onRendered() callback!
If that was helpful and you’d like some more real-world examples let me know. But I think that’s the gist of it: Setting up things that need to be expressed in JavaScript, where just putting them in the Blaze template in HTML/Jade is not enough and you still need some “do this whenever this template is going to be shown (again)” stuff. Without Meteor, in a plain old HTML+JS app, you’d put that stuff in a <script> tag right after the relevant HTML, but in Meteor we have the nicer and more maintainable way of using the callback that gets called automatically at just the right time with the template context etc!
HTH 
1 Like
Simple answer to this is that onCreated is for things that need to happen before the template is rendered to the DOM, and onRendered is for things that manipulate the DOM and therefore wouldn’t work in onCreated because the template hasn’t been inserted yet.
6 Likes