Life-cycle of Ractive components

Question

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?

Answer 1

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.

Answer 2

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.