Search code examples
ractivejs

Upgrading from 0.7 to 0.9: how do I access my event's keypath?


https://jsfiddle.net/zFiddler/gm9k4mrc/1/

Given this:

var view = new Ractive({
    el : '#container',
    template : "{{#item}}<a href='#' on-click='doSomething'>Do Something</a>{{/}}",
    data : {item : {name: "item"}}
})

view.on('doSomething', event => {
event.original.preventDefault();
console.log(event);
alert(event.keypath);
});

How would I access the keypath for the fired event?


Solution

  • In 0.9, in jQuery-esque fashion, and to be consistent between component and element events, handlers attached via ractive.on will now receive an instance of the Context object as first argument which should contain everything you need to know about the event, the node it's from, the Ractive instance attached to it, and so on. DOM events should be available via the event property of that object (no longer the funny-sounding original). The keypath can be obtained by context.resolve().

    view.on('doSomething', context => {
      const event = context.event
      event.original.preventDefault();
      console.log(event);
      alert(context.resolve());
    });