如何在 Slim 模板中使用 Ractive 的 on-tap 属性？答案

【问题标题】：How can I use Ractive's on-tap attribute with Slim templates?如何在 Slim 模板中使用 Ractive 的 on-tap 属性？
【发布时间】：2015-05-19 22:05:39
【问题描述】：

在我的 Slim 模板中，我有：

th class=="sortable {{ sortColumn === 'name' ? 'sorted' : '' }}" on-tap=="sort:name" Name

这呈现：

<th class="sortable sorted">Name</th>

单击项目时未调用排序方法。

on-tap 属性应该在这种情况下工作还是需要不同的语法？我试过 Slim 的 splat 属性：

th class=="sortable {{ sortColumn === 'name' ? 'sorted' : '' }}" *({:on-tap => ["sort:name"]})

但 Slim 在点击 on-tap 时会抱怨。

感谢任何帮助。

【问题讨论】：

标签： slim-lang ractivejs

【解决方案1】：

编辑：对不起，我第一次误解了。基于此：

单击项目时未调用排序方法。

我怀疑你混淆了方法调用和事件。

如果要在 ractive 实例上调用方法，语法为：

on-tap='sort("name")'

并且将通过以下方式处理：

new Ractive({
   sort: function(name){

   }
});

如果你想引发一个事件，你可以使用你拥有的语法：

on-tap='sort:name'

并通过以下方式处理：

new Ractive({
   oninit: function(){
       this.on('sort', function(event, name){

       });
   }
});

见http://jsfiddle.net/yccknhh5/。

【讨论】：

需要按name属性排序，而不是按name值排序。 According to the tutorial，不应该引用胡子。
另外，这些th 标签并没有像教程中那样变成可点击的元素。这就是为什么我觉得 on-tap 属性没有被正确渲染。
本教程从未提到 ractive-events-tap.js 是一个依赖项，因此我假设本机库处理了此功能。你的小提琴让我看到了。