How to pass value from helper to button click as text in for each loop?

help
1

Hi everyone,

I am retrieving values from collection and display in a div section using a for each loop, basically its a div that has the button in it, I want to get the value from a div section. Please check the attached screenshot.

Check out this code


{{#each fetch_posts}}
       <div class="col-md-12" style="border:4px solid red;margin-bottom: 6px">
              {{#if post_image_present}}
                  <img id="image_view" src="uploads/{{post_image}}" alt="group_image" style="height:180px;width:200px; margin-top: 12px; ">
              {{/if}}
               <p id="post_name">{{post}}</p>
               <p id="post_owner">{{post_creator}} </p>
               <p type="hidden"  id="post_id">{{post_id}}</p>
               <button type="button" id="like_counter"  class="btn btn-md add-skill-btn btn-home" >{{total_likes}}</button>
              <button type="button" id="like_post"  class="btn btn-md add-skill-btn btn-home" >{{like_on_post}}</button>
       </div>
{{/each}}

When I try to get the values from the **post_id**, I am getting the same values every time, I donā€™t know how to get different values from different divs, Please help me, I am getting stuck at this

Screenshot from 2017-11-10 19-48-02
Screenshot from 2017-11-10 19-48-02839Ɨ838 19.9 KB

2

You mean in the event?

Template.myTemplate.events({
  'click button'(){
    console.log(this) //this should be the document you want
  }
})
3

From what Iā€™m aware you canā€™t do this, at least in Blaze. How I do it is I set a property to the element and retreive it using jquery.

{{#each fetch_posts}}
       <div class="post-item" data-id="{{_id}}">
              <button type="button" class="like_post"></button>
       </div>
{{/each}}

'click .post-item .like_post'(e, instance) {
   var postId = $(e.target).closest('.post-item').attr("data-id");

},

Edit: herteby is right about using ā€˜thisā€™

4

yes, I am able to print the values I want but not able to retrieve the same in alert or console.log. Please help @herteby

5

Hi @francisbou, is there any alternative I can achieve the same in blaze, I donā€™t think thatā€™s not possible in Blaze

6

I am using blaze, thatā€™s how I do it but I thing herteby is right, ā€œthisā€ will contain the context of your each loop.
Good luck

7

I used to use jQuery as well, until I figured out that you donā€™t really need it

{{#each fetch_posts}}
       <div class="post-item" data-post-id="{{_id}}">
              <button type="button" class="like_post" data-post-id="{{_id}}"></button>
       </div>
{{/each}}

'click .post-item .like_post'(e, instance) {
   var postId = e.currentTarget.dataset.postId;
},
2 Likes
8

Thanks @jamgold. I have find the alternative solution of this problem and thatā€™s similar to your one.
Thanks for the help @jamgold

9

what i do is use a separate template for the listā€™s elements so the data getā€™s encapsulated in a clean way and is easily accessible without writing it into the template :slight_smile:

// list.js
Template.someList.helpers({
  "elements": function () {
    // provide the elements
    return ["aaa","bbb","ccc","ddd"];
  }
});

// someList.html
<template name="someList">
  {{#each element in elements}}
    {{!-- hand over the element as 'data' to the other template --}}
    {{> listElement data=element}}
  {{/each}}
</template>

// listElement.js
Template.listElement.events({
  "click .js-like": function (e) {
    console.dir(this); // will print data
  }
});

// listElement.html
<template name="listElement">
  {{!-- your post here. you can directly print from the passed parameter --}}
  {{ data }}
  <button class="js-like">like</button> {{!-- nothing else needed. i like to prepend js- to classes with handlers so i know which are for styling and which are for logic --}}
</template>
10

Are you saying my solution didnā€™t work for you? :thinking: Did you try it? Iā€™ve used it everywhere in my app

11

Well, I am new to the frontend, I belong to mobile app community. It takes time to understood what you are has said, but your solution was wrong, there should be class instead of Id, this is the main logic I would say. Thanks for the help.

By the way I am stuck at cropping image, can you help me in this