Events

edit this page

Like many libraries, Ractive implements the publish/subscribe mechanism to allow you to respond to, or trigger, particular events.

ractive = new Ractive({
  el: 'body',
  template: '<button on-click="activate">click me!</button>'
});

ractive.on( 'activate', function ( event ) {
  alert( 'Activating!' );
});

There are actually two-levels of event handling in Ractive:

The lower-level interaction with DOM events or custom events. These are specified using template directives that also specify how the event is to be handled using either proxy events or method calls.

The publish-subscribe api and event system within Ractive and between components. Proxy events bridge the DOM event into a Ractive event, whereas method calls directly invoke the ractive instance and do not use the pub/sub infrastructure.

The publish-subscribe event handling in Ractive allows you to consistently handle three different categories of generated events:

• Proxy events, mentioned above, proxy DOM and custom events defined in your template
• Lifecycle events generated by each ractive instance - such as init, render and teardown
• Custom events fired in code using ractive.fire(), which can be anything you like

Hygiene

One of the advantages of using Ractive events is that, in addition to being able to manually unsubscribe events, both DOM events and Ractive Events will be automatically unsubscribed when the ractive instance or component is torndown.

In practice, this means adding a template directive like on-click='select' is all that is needed to manage the DOM event.