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）而你无法提供像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代理事件密钥路径

1 个答案: