Lifecycle events

edit this page

Every Ractive instance has a lifecycle - it is created, then rendered, and eventually may be changed and 'torn down'. You can subscribe to these lifecycle events using ractive.on():

ractive = new Ractive({
  el: 'body',
  template: myTemplate
});

ractive.on( 'teardown', function () {
  alert( 'Bye!' );
});

You can also add handlers as initialisation options:

ractive = new Ractive({
  el: 'body',
  template: myTemplate,
  onteardown: function () {
    alert( 'Bye!' );
  }
});

The full list of lifecycle events is as follows:

Name	Event is fired...
construct	...as soon as new Ractive(...) happens, before any setup work takes place
config	...once all configuration options have been processed
init	...when the instance is ready to be rendered
render	...each time the instance is rendered (normally only once)
complete	...after render, once any intro transitions have completed
change	...when data changes
update	...after ractive.update() is called
unrender	...each time the instance is unrendered
teardown	...each time the instance is destroyed (after unrender, if the teardown is responsible for triggering the unrender)
insert	...each time ractive.insert() is called
detach	...each time ractive.detach() is called (note: ractive.insert() calls ractive.detach())

Most of the events do not have arguments, except for:

• construct supplies the actual initialisation options provided to the instance constructor
• change supplies a change object with each change keypath as a property and the new change value as the value of that property

Reserved event names

Note: the built-in lifecycle events are reserved, which means you can't use their names as proxy events.