Question

点击click .menuItem时，此Meteor模板事件menuShortName无法打印出属性li的值。单击列表项时如何获取该值？
请参阅底部的图片，其中显示了收集文档。

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>

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

（注意：我在锚中移动了数据属性）

并像这样访问：

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

＆＃34;这＆＃34;没有引用Meteor事件中的数据对象

1 个答案: