The library is quite mature now. Use Ractive.on('render', ...);
or onrender
in a template/component to access the DOM. See: http://docs.ractivejs.org/latest/lifecycle-events.
This is true from version 0.6
and on.
Вопрос
Other than init being called, I'm not sure what the life-cycle of a Ractive component is. When is it safe to access the DOM directly, for example? I tried to use the popular sparklines jQuery plug-in, but I never got it to work. I used a directive instead and - voila - lovely sparklines.
Any documentation on what kind of events and callbacks a component receives in Ractive?
Решение 2
The library is quite mature now. Use Ractive.on('render', ...);
or onrender
in a template/component to access the DOM. See: http://docs.ractivejs.org/latest/lifecycle-events.
This is true from version 0.6
and on.
Другие советы
The short answer is that in the most recent stable release, it's undefined - in some cases, a component's init
method is called before the component gets appended to the DOM. That's a bug.
It's no longer the case in the next version, 0.4.0: http://cdn.ractivejs.org/edge/Ractive.min.js
As of 0.4.0, it looks like this:
Ractive.components.sparkline = Ractive.extend({
beforeInit: function (options) {
// called before any setup happens, in case you
// need to transform `options` in any way
},
init: function (options) {
// called immediately after the initial render,
// when the component is in the DOM
},
complete: function () {
// called when any initial transitions have
// completed
}
});
A teardown
event will be fired before the component is removed from the DOM - for example in your init
method you could add some code to do any cleanup that's necessary (if any):
init: function () {
this.on('teardown', function () {
// cleanup
}
},
...
I'd welcome any feedback you have on other events/hooks that you feel are missing, if there are any.