缺少 Ractive 代理事件密钥路径

Question

我有这个：

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)
})

除了 event.keypath 的值为 "" 外，工作正常。这是为什么？

Answer 1

事件的 keypath 上下文是组件的根模板上下文，在本例中是根 .。一般来说，键路径不一定会从组件到父组件很好地冒泡，因为它们可能完全不同。

重铸事件最初看起来是一个有吸引力的选择：

{{#items}}<item name='{{name}}' on-doSomething='doSomething'/>{{/items}}

但是有一些未解决的问题，因为组件事件肯定需要一些爱。

在这种情况下他们并没有完全削减它，因为你没有得到你需要的（和期望的）这是调用父上下文中的键路径（例如items.0）你可以' t 提供像 on-doSomething='doSomething:{{@keypath}}'.

这样的参数

你可以做的是将需要的信息传递到组件中

{{#items}}<item name='{{name}}' keypath='{{@keypath}}' index='{{@index}}'/>{{/items}}

然后使用 event.component 引用访问数据：

collection.on('item.doSomething',function(){
    console.dir(this.event.component.get('keypath'));
})

见http://jsfiddle.net/6owmfeaj/14/

缺少 Ractive 代理事件密钥路径

Ractive proxy event keypath missing

ractivejs