Javascript 重新编写jQuery函数以使用Meteor.js

我写了一小段jQuery，它在Rails应用程序中非常有效：

$(".myfilter li").click(function () {
    $("." + $(this).data('class')).toggle('slow')
    $(this).toggleClass("secondary")
});

我正在尝试使用Meteor JS重新编写功能。以下是我正在尝试的，但是，它不起作用：

Template.postList.events({
  "click .myfilter li":function(event, template) {
    template.$("." + $(this).data('class')).toggle('slow');
    template.$(this).toggleClass("secondary");
  }
});

这里是HTML文件

post list.html

<template name="postList">
<div class="row">
    <div class="large-12 columns">
        {{ >postForm }}
        <h2>Posts for {{name}}</h2>
        <ul class="button-group myfilter">
            {{ #each posts }}
              {{ >postTypes }}
            {{ /each }}
        </ul>
    </div>
</div>
</template>

<template name="postTypes">
    <li><a href="#" class="button tiny">{{postType}}</a></li>
</template>

{{>postForm}
{{name}的帖子

{{{#每个帖子}
{{>postTypes}
{{/每个}}

post-types.html

<template name="postList">
<div class="row">
    <div class="large-12 columns">
        {{ >postForm }}
        <h2>Posts for {{name}}</h2>
        <ul class="button-group myfilter">
            {{ #each posts }}
              {{ >postTypes }}
            {{ /each }}
        </ul>
    </div>
</div>
</template>

<template name="postTypes">
    <li><a href="#" class="button tiny">{{postType}}</a></li>
</template>

问题出在
这个
上

在jquery函数
中，此
绑定到选择器。在Meteor event maps
中，此
绑定到模板或模板数据，具体取决于创建模板的上下文

您将希望用类似于
event.target
或
template.find（）的内容替换
this
，我建议使用console.log进行逐步调试。首先
console.log（this，$（this））；console.log（$（this.data（'class'））
以确保获得正确的值问题在于“this”。在jquery函数中，“this”绑定到选择器。在Meteor事件映射中，“此”绑定到模板或模板数据，具体取决于创建模板的上下文。您需要将“this”替换为event.target或template.find（）@JeremyS之类的内容。这很有魅力。如果你想把它作为答案提交，我会把它标记为正确的。