Hiding (not removing) content from a collection the Meteor way

help
1

I want to emulate jQuery’s .toggle(). I know that if you have a click event, the Meteor data is with it, but I’m not sure how to manipulate the DOM with it. It’d be really cool if I could hide a <li> without having to label it.

<ul>
    <li>I'm from a collection. Click me to manipulate me.</li>
    <li>I'm from a collection. Click me again to make me normal.</li>
</ul>

Any documentation or tutorial to reference would be very handy. I’ve searched this for hours online last night.

2

Do you just want to manipulate DOM? you can access jquery from the template:

<ul>
    <li>I'm from a collection. Click me to manipulate me.</li>
    <li style="display:none;">I'm from a collection. Click me again to make me normal.</li>
</ul>

Template.foo.events({
  'click li': function(e, t) {
    t.$('li').toggle();
  }
});
3

That’s close to exactly what I wanted. I thought it the <li> would have been linked to the document, so I could hide it with minimal mark-up, like this:

<li>{{this}}</li> <!-- if clicked, only this would be hidden -->
<li>{{this}}</li>

I even tried to view the properties in the console and I saw the $, but I didn’t think to use it like that. Makes 100% sense though. Do you know where in the docs that it tells you the arguments for events? I was just adding arguments and logging them to the console.

4

The documentation doesn’t seem to mention the second argument to the event callbacks in its eventmaps section :frowning: , I found out about it using console.log too.

Edit: I spoke too fast. It does say The handler function receives two arguments: event, an object with information about the event, and template, a template instance. I just looked over the examples and saw none using the second argument.

5

Thanks, buddy. You helped a lot. Also, to get my desired effect, I just passed a document’s field into the <li>'s class, so when I toggle, I can use this.someId. For some reason, this._id doesn’t work, maybe it is a security thing.

6

I think the most “Meteoric” way to do this is to have a ReactiveDict on the page where you keep track of hidden items, and then use Blaze’s {{#if}} to hide the items from the DOM.

7

Instead of a ReactiveDict, I use a local collection to do this kind of thing (I use observeChanges to sync the local collection with the original collection, both collections sharing the same _id).