Question

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

2016-02-16

66

meteor

按照本教程中的有关动态数据动态模板的内容，当对任何项目触发点击事件时，我收到控制台错误。

Uncaught ReferenceError: template is not defined in 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,template) {
    // your codes here
}

Faysal Ahmed

2016-02-16

Answer 2

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

尝试此 'click .menuItem': function (event,template)

Answer 3

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