"this" is not referencing the data object inside Meteor event

Question

This Meteor template event click .menuItem failed to print out the value of the property menuShortName when the li is clicked. How can I get that value when I click the list item?
Please see the image at the bottom showing the collection documents.

Template.mainMenu.helpers({
  menuItems: () => {
    if (Meteor.userId()) {
      return MenuItemsCol.find({}, {sort: {createdAt: 1}});
    }
  }
});

Template.mainMenu.events({
  'click .menuItem': (event) => {
    let menuShortName = this.menuShortName;
    console.log(menuShortName);
  }
});

<body>
  {{> header}}
  {{#if currentUser}}
    {{#if isVerified}}
      {{> index}}  // <--------------------------- 
    {{else}}
      <br><br><br><br>
      <p>Check your email for your verification link!</p>
    {{/if}}
  {{else}}
    {{> terms}}
  {{/if}}
</body>

<template name="index">
  <div id="main">
    {{#if (display 'mainMenu')}}
      {{> mainMenu}}  // <--------------------------- 
    {{else}}
      {{> content}}
      {{#if (session 'showFooter')}}
        {{> footer}}
      {{/if}}
    {{/if}}
  </div>
</template>

<template name="mainMenu">  // <--------------------------- 
  <div id="mainMenu">
    <div class="row">
      <section class="col-xs-12">
        <ul class="list-group">
         {{#if Template.subscriptionsReady}}
          {{#each menuItems}}
            <li data-template="{{menuItem}}" role="presentation">
              <a href="#" class="list-group-item menuItem">
                <img src="/{{image}}.svg"/>
                {{menuItem}}
              </a>
            </li>
          {{/each}}
         {{//if}}
        </ul>
      </section>
    </div>
  </div>
</template>

Possible duplicate of [How to access the correct \`this\` inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Heretic Monkey, Feb 24 '17 at 17:49

Oliver · Accepted Answer · 2017-02-24T18:34:00.930

0

In blaze the event handler function gets passed 2 parameters, the event, and the instance of template on which the event was fired.

The event object has a reference to the target (the DOM element)

You can assign the data to the element which you are listening the event on (not the parent):

<template name="mainMenu">  // <--------------------------- 
  <div id="mainMenu">
    <div class="row">
      <section class="col-xs-12">
        <ul class="list-group">
         {{#if Template.subscriptionsReady}}
          {{#each menuItems}}
            <li role="presentation">
              <a data-template="{{menuItem}}" href="#" class="list-group-item menuItem">
                <img src="/{{image}}.svg"/>
                {{menuItem}}
              </a>
            </li>
          {{/each}}
         {{//if}}
        </ul>
      </section>
    </div>
  </div>
</template>

(note: I moved the data- attribute in the anchor)

and access it like this:

Template.mainMenu.events({
  'click .menuItem': (event) => {
    let menuShortName = event.currentTarget.dataset.template;
    console.log(menuShortName);
  }
});

edited Feb 24 '17 at 18:34

answered Feb 24 '17 at 17:51

Oliver

1,360
9
14

`event.currentTarget.value` prints out `undefined` in the console – Fred J. Feb 24 '17 at 18:00
Your event listener is on an anchor tag, which doesn't have a value (is not a form field). In your case, you can simply read the innerHTML of the event target. I updated the answer accordingly – Oliver Feb 24 '17 at 18:19
that gives the " Videos - How to" but not the menuShortName – Fred J. Feb 24 '17 at 18:23
Move the data attribute in the element which you are listening events for, and fetch the value from it. – Oliver Feb 24 '17 at 18:35
I did `
` and used your updated answer, still getting 'undefined` printed to the console. I wonder if the data is loaded when the page is rendered... hummm

Fred J.

Feb 24 '17 at 19:26

"this" is not referencing the data object inside Meteor event

1 Answers1