[solved]Pass value to object by clicking event

help
1

How can i pass the Value of an button to a object
each button is getting the imageId of the currentImage into value

      {{#each image in pictures}}
             {{#if $eq image null}}

             {{else}}
                    <li>
                        <button data-value="{{image}}" type="button" class="edit_button btn btn-default">
                        <img class="img-responsive" src= {{getImgURL image "thumbnail115"}} alt="">
                        </button>
                   </li>
            {{/if}}
      {{/each}}

im passing the id to my event

Template.projectDetails.events({

  'click .edit_button': function(event){
      result = event.currentTarget.dataset.value;
      console.log(result);
      Template.instance().refreshPreview.set(true);
      return result;
      
  },
});

now if i click the button he should put the id(result) into the object/helper

Template.projectDetails.helpers({

  context: function(value) {
    var result2 = _.clone(this);
    result2.valuePreview = "value";
    return result2;

  }
});

how does it work?
because i wanna use the the object for my new Template

{{>galleryPreview context}}
2

Not sure what you trying to achieve here but you can use following methods to share data between templates:

  1. global vars
  2. localStorage
  3. Session

Remember to clear them once you are done.

3

I have an array with image_Ids.
Every index has a different image id.

Now i generate for every image a button, and the value of every button has the id of the current image.
By pressing the button he should submit the value of the button to another template.

it should work like a diashow, by pressing the button, he should activate the template with the big image, so i have to submit the id of the right Image,

4

You can’t return the result from a template event. The return value is used to affect the way standard (HTML) form processing works.

What you need to do here is set a template ReactiveVar to the result value and get that within your helper. If you set the initial value to null or false you’ll be able to take the right action when it changes to something real.

5

with Sessions its working fine now,

Template.projectDetails.onCreated(function() {
      this.refreshPreview = new ReactiveVar(false);
});

Template.projectDetails.helpers({

  result: function() { 
    return Session.get('result');
  }

});

Template.projectDetails.events({

  'click .edit_button': function(event){
      const result = event.currentTarget.dataset.value;
      console.log(result);
      Template.instance().refreshPreview.set(true);
      Session.set('result', result);
      
  } 
});


{{#if getRefreshPreview}}
                            
        {{>galleryPreview result}}

{{else}}

{{/if}} 

Template.galleryPreview.helpers({  
   result: function() { 
    return Session.get('result');
  }
});
6

Glad you got it working.

FYI, if you wrap your code between two lines of triple backtags, it will be easier for us to read:

```
paste
code
here
```
7

thx for the tipp :smiley: im new here ^^
I edited my posts :slight_smile:

1 Like
8

Shouldn’t you be able to do the following, which makes the code more readable?

      {{#each image in pictures}}
             {{#unless $eq image null}}
                    <li>
                        <button data-value="{{image}}" type="button" class="edit_button btn btn-default">
                        <img class="img-responsive" src= {{getImgURL image "thumbnail115"}} alt="">
                        </button>
                   </li>
            {{/unless}}
      {{/each}}
1 Like