Question

此Meteor模板点击事件需要将道具shortName打印到浏览器控制台，但会打印undefined。为什么以及如何解决它？ 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>

修改
shortName是一个错字，已经修复无济于事。还在给undefined

Answer 1

首先，我将使用数据上下文而不使用data-*属性。呈现某个元素的数据上下文由Blaze保留，并且作为其this上下文可用于事件处理程序，因此只需在事件处理程序中使用this.shortName就可以获得所需的值。 / p>

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

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

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

如果您选择自定义数据属性，您应该知道他们的规范和映射到JS。它不是1：1而且并非一切都被允许。

HTML中自定义数据属性的名称以data-开头。它必须只包含字母，数字和以下字符：破折号（ - ），点（。），冒号（:)，下划线（_） - 但不是任何ASCII大写字母（A到Z））。

Javascript中自定义数据属性的名称是相同HTML属性的名称，但在camelCase中没有破折号，点等。


来源：MDN

这意味着您使用的标识符是非法的，与shortName对应的标识符应为data-short-name：

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

Answer 2

我认为你只是在犯错误。您在 data-shortName

中遗漏了 t

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

然后取消注释这一行，你应该好好去。

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

Answer 3

不确定这是否是副本＆amp;粘贴，但你的li标签有数据集＆＃39; shorName＆＃39; （缺少＆＃39; t＆＃39;）而不是＆＃39; shortName＆＃39;。

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

3 个答案: