“this”没有引用 Meteor 事件中的数据对象答案

【问题标题】："this" is not referencing the data object inside Meteor event“this”没有引用 Meteor 事件中的数据对象
【发布时间】：2017-02-25 02:34:00
【问题描述】：

当单击li 时，此 Meteor 模板事件 click .menuItem 未能打印出属性 menuShortName 的值。单击列表项时如何获取该值？
请参阅底部显示收集文件的图像。

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>

【问题讨论】：

How to access the correct `this` inside a callback?的可能重复

标签： javascript meteor

【解决方案1】：

在 blaze 中，事件处理函数被传递了 2 个参数，事件和触发事件的模板实例。

事件对象具有对目标（DOM 元素）的引用

您可以将数据分配给您正在监听事件的元素（而不是父元素）：

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

（注意：我移动了锚点中的 data- 属性）

并像这样访问它：

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

【讨论】：

event.currentTarget.value 在控制台中打印出undefined
您的事件侦听器位于锚标记上，该标记没有值（不是表单字段）。在您的情况下，您可以简单地阅读事件目标的 innerHTML。我相应地更新了答案
提供“ 视频 - 操作方法”，但不提供 menuShortName
移动你正在监听事件的元素中的数据属性，并从中获取值。
我做了<li data-template="{{menuShortName}}" role="presentation"> 并使用了您更新的答案，仍然将“未定义”打印到控制台。不知页面渲染时是否加载了数据……嗯