Search code examples
ractivejs

how to attach multiple events to a ractive element

The documentation describing method call event handling suggests that it's possible to attach multiple handlers to an event separated by a comma, like this:

<p on-click='speak(), bark()'>{{name}}</p>

However this throws an error when the element is first rendered, so clearly I'm misunderstanding the docs. Can someone please help me to understand how to attach multiple handlers to the on-click event.

thanks in advance

Les

Solution

  • I believe you're still using 0.7 or older. Update to the latest version (0.8.7 as of this writing) and you'll be able to do the following:

    const Component = Ractive.extend({
  template: `
    <button on-click="@this.foo(), @this.bar()">Click Me</button>
  `,
  foo(){
    alert('Hello')
  },
  bar(){
    alert('World!')
  }
});

new Component({ el: 'body' });