CODEWITHSUNDEEP
javascriptmeteor
Fred J.
Fred J.

Reputation: 6039

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

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>

enter image description here

Upvotes: 0

Views: 47

Answers (1)

Oliver
Oliver

Reputation: 1380

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);
  }
});

Upvotes: 0

Related Questions