Question

关于动态数据的动态模板this tutorial之后，当任何项目触发click事件时，我收到控制台错误。

未捕获的ReferenceError：模板未在main_menu.js中定义

在下面的代码中指示的行中。我不确定为什么并且想要了解不仅仅是修复。非常感谢

Template.mainMenu.onCreated(function () {
  this.selectedItem = new ReactiveVar("task1");
});

Template.mainMenu.helpers({
  menuItems: [
    {menuItem: "task1", login: false},
    {menuItem: "task2", login: true},
    {menuItem: "task3", login: true},
    {menuItem: "task4", login: true},
    {menuItem: "task5", login: true},
    {menuItem: "task6", login: true},
    {menuItem: "task7", login: false},
    {menuItem: "task8", login: false},
    {menuItem: "task9", login: false},
    {menuItem: "LOG IN", login: false}
  ],
  task: function () {
    return Template.instance().selectedItem.get();
  },
  taskData: function () {
    var tab = Template.instance().selectedItem.get();
    return tab;
  }
});

Template.mainMenu.events({
  'click .menuItem': function (event) {
    var item = this.menuItem;
    var date = new Date();
    initializeTask(item);

    Session.set('taskSelected', this.menuItem);
    Session.set('showMainMenu', false);
    Session.set('taskInProgress', true);
    Session.set('showFooter', true);

    //tasks tracking
    if (Tasks.find().count() === 0) {
      Tasks.insert({menuItem: item, createdAt: date});
    } else {
      var selected = Tasks.findOne();
      Tasks.update({_id: selected._id}, {$set: {menuItem: item, createdAt: date}});
    }

    var currentItem = $(event.target).closest("li");
    template.selectedItem.set(currentItem.data("template"));  <<----- THIS IS THE TRUBLE LINE -----
  }
});

<head>
  <title>Tasks</title>
</head>

<body>
  {{> header}}

  {{#if (session 'showMainMenu')}}
    {{> mainMenu}}
  {{/if}}

  {{#if (session 'showFooter')}}
    {{> footer}}
  {{/if}}
</body>

<template name="mainMenu">
  <div class="container">
    <div class="row">
      <section class="col-xs-12">
        <div class="list-group">
          {{#each menuItems}}
            <li data-template="{{menuItem}}">
              <a href="#" class="list-group-item menuItem">
                <img src="/abc.png">
                {{menuItem}} <span class="badge">&#x3e;</span>
              </a>
            </li>
          {{/each}}
        </div>
      </section>
      {{> Template.dynamic template=task data=taskData}}
    </div>
  </div>
</template>

<template name="task1">
  {{ this }}
  <form>
    <input type="text" name="task1Number">
    <input type="submit">
  </form>
</template>

<template name="task2">
  {{this}}
</template>

Answer 1

您没有将模板作为参数添加到活动中。 'click .menuItem': function (event)。

试试这个'click .menuItem': function (event,template)

Answer 2

只需要更新您的事件参数。

'click .menuItem': function(event,template) {
    // your codes here
}

Answer 3

您的事件侦听器将作为第二个参数传递模板实例。将'click .menuItem': function (event) {替换为'click .menuItem': function (event, template) {。这将解决问题。

动态模板和未定义的属性值

3 个答案: