CODEWITHSUNDEEP
javascripthtmlmeteorspacebars
Subnatural
Subnatural

Reputation: 103

MeteorJS how can I put buttons in a {{#each}} block that corresponds to the thing inside the #each?

Sorry that is such a confusing title, but I have list of friend requests, and I want to put a button next to it to accept the friend request. The problem is that there isn't a static number of requests, obviously, so I need to do it within a foreach. But how can I make it so that the button corresponds to the username I'm displaying next to it?

I have this for the html

Pending Friend Requests:
    <br><br>
    {{#each getRequests}}
        {{requester}}
    {{/each}}

and I would want to have a button produced next to requester, that I could use the JS back end to accept the request.

Upvotes: 1

Views: 27

Answers (1)

David Weldon
David Weldon

Reputation: 64312

Give something like this a try:

{{#each getRequests}}
  <p>Requested by: {{requester}}</p>
  <button class="accept">accept</button>
{{/each}}

Template.myTemplate.events({
  'click .accept': function() {
    // do something useful here with requester?
    console.log(this.requester);
  }
});

The key insight is that an #each changes the context of both the template block and the related events. Therefore your event handler has access to requester and anything else defined inside of a request.

Upvotes: 1

Related Questions