javascript - 模板事件无法返回上下文数据

Question

此 Meteor 模板单击事件预计会将属性 shortName 打印到浏览器控制台，但它打印 undefined。为什么以及如何解决它？谢谢

"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>

编辑
shortName 是一个拼写错误，已修复但无济于事。仍然给出未定义

Answer 1

首先，我将使用数据上下文而不是使用 data-* 属性。呈现某个元素的数据上下文由 Blaze 保留，并且可作为其 this 上下文提供给事件处理程序，因此只需在事件处理程序中使用 this.shortName 即可已经给了你想要的值。

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

您将把它作为数据上下文，只是不要使用箭头函数，该函数将其 this 上下文静态绑定(bind)到其定义期间使用的上下文。

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

<小时/>

如果您选择自定义数据属性，您应该了解它们的规范以及到 JS 的映射。这不是 1:1，也不是一切都被允许。

• 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

这意味着您使用的标识符不合法，shortName对应的应该是data-short-name:

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