CODEWITHSUNDEEP
javascriptjquerymeteor
Fred J.
Fred J.

Reputation: 6019

template event fail to return context data

This Meteor template click event is expected to print the prop shortName to the browser console but it prints undefined. Why and how to fix it? thx

"use strict";

Template.subMenu.helpers({
  subMenuItems: () => {
    let task = Session.get('taskSelected');
      return SubMenuCol.find({action: task});
  }
});

Template.subMenu.events({
  'click .subMenuItem': (event) => {
    //let shortName = $(event.target).data('shortName');
    let shortName = event.currentTarget.dataset.shortName;

    console.log(shortName);
  }
});

<template name="subMenu">
  <ul id="sub-menu">
    {{#if Template.subscriptionsReady}}
      {{#each subMenuItems}}
        <li class="subMenuItem" data-shorName={{shortName}} data-action={{action}}>{{menuItem}}</li>
      {{/each}}
    {{/if}}
  </ul>
</template>

edit
shortName was a typo, has been fixed for no avail. still giving undefined

Upvotes: 1

Views: 130

Answers (3)

MasterAM
MasterAM

Reputation: 16478

To begin with, I would use the data context and not use data-* attributes. The data context a certain element was rendered with is preserved by Blaze and is available to the event handler as its this context, so simply using this.shortName in the event handler would have given you the desired value.

<template name="subMenu">
  <ul class="sub-menu">
    {{#if Template.subscriptionsReady}}
      {{#each subMenuItems}}
        <li class="sub-menu-item">{{menuItem}}</li>
      {{/each}}
    {{/if}}
  </ul>
</template>

You will have it as the data context, just don't use an arrow function, which statically binds its this context to the one used during its definition.

Template.subMenu.events({
  'click .sub-menu-item'(event) {
    let shortName = this.shortName;
    console.log(shortName);
  }
});

If you opt for the custom data attributes, you should know their specification and mapping to JS. It is not 1:1 and not everything is allowed.

  • The name of a custom data attribute in HTML begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_) -- but NOT any ASCII capital letters (A to Z).
  • The name of a custom data attribute in Javascript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.

source: MDN

This means that the identifier you used is illegal, and the one corresponding to shortName should have been data-short-name:

<li class="subMenuItem" data-short-name={{shortName}} data-action={{action}}>{{menuItem}}</li>

Upvotes: 1

David
David

Reputation: 46

Not sure if this was copy & paste but your li tag has dataset 'shorName' (missing 't') rather than 'shortName'.

Upvotes: 0

jordanwillis
jordanwillis

Reputation: 10705

I think you are just suffering from a typo mistake. You left out the t in data-shortName

<li class="subMenuItem" data-shorName={{shortName}}>

Then uncomment this line and you should be good to go.

//let shortName = $(event.target).data('shortName');

Upvotes: 0

Related Questions