ref: jsfiddle
I have this:
var Item = Ractive.extend({
template : "<p on-click='doSomething'>{{name}}</p>"
})
var collection = new Ractive({
el : '#container',
template : "{{#items}}<item name='{{name}}'/>{{/items}}",
data : {items : [{name: "first item"},{name: "second item"}]},
components : {item : Item}
})
collection.on('item.doSomething',function(event){
console.dir(event)
})
works fine except that the value of event.keypath is "". Why is this?
The keypath context of the event is the root template context of the component, in this case the root .. In general keypaths don't necessarily bubble up well from component to parent, as they may be totally different.
Recasting events initially looks like an attractive option:
{{#items}}<item name='{{name}}' on-doSomething='doSomething'/>{{/items}}
But there a few open issues as component events are definitely in need of some love.
They don't quite cut it in this case as you don't get what you need (and expect) which is the keypath in the calling parent context (items.0 for example) and you can't supply arguments like on-doSomething='doSomething:{{@keypath}}'.
What you can do is pass the needed info into the component
{{#items}}<item name='{{name}}' keypath='{{@keypath}}' index='{{@index}}'/>{{/items}}
and then use the event.component reference to access the data:
collection.on('item.doSomething',function(){
console.dir(this.event.component.get('keypath'));
})