Question

模板包含：

<a href="#container" on-click="toggle('container')">Container</a>
<div id="container" class="{{ container ? '' : 'hide' }}"></div>

[...]

{{#each something:i}}
<a href="#example_{{@key}}" on-click="toggle('innerContainer.' + i)">Inner Container</a>
<div id="example_{{@key}}" class="{{ innerContainer[i] ? '' : 'hide' }}"></div>
{{/each}}

数据对象是：

data = {
    something: {},
    container: true,
    innerContainer: []
};

然后是JavaScript：

ractive.on('toggle', function (event) {
    event.original.preventDefault();
});

但是，由于未调用preventDefault事件处理程序，我无法在那里找到使用toggle方法的方法。

有什么建议吗？

Answer 1

处理事件可能有点令人困惑，因为有两种不同的风格：

提供要触发的事件名称，例如on-click="toggle"
提供应用于当前ractive实例的方法调用：on-click="toggle()"

如果您需要活动，可以将参数传递给事件名称样式（on-click="toggle:container"), but that is going to be deprecated so you may want to go with the slightly longer on-click =“fire（'toggle'，'container'）”。

在您的示例中，我假设您尝试使用Ractive现有toggle方法，但只是在事件上调用防止默认值。

所以一个选择就是使用：

new Ractive({
    // ...
    toggle( keypath ){
        _super( keypath );
        this.event.original.preventDefault();
    },
    // ...
});

另一个看起来像：

// on-click="fire('toggle', 'container')"

new Ractive({
    // ...
    oninit( keypath ){
        this.on( 'toggle', keypath => {
           this.toggle( keypath );
           this.event.original.preventDefault();
        });
    },
    // ...
});

RactiveJS和preventDefault on toggle

1 个答案: