Re-Writing jQuery Function to Work with Meteor.js

Question

I wrote this small piece of jQuery that worked great in a Rails app:

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

I'm trying to re-write the functionality using Meteor JS. Here is what I'm trying, however, it is not working:

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

Here are the HTML files.

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>

post-types.html

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

Answer 1

The issue is with this .

In your jquery function this is bound to the selector. In Meteor event maps this is bound to the template, or the template data, depending on the context in which the template is created.

You will want to replace this with something like event.target or template.find() .