CODEWITHSUNDEEP
meteor
Fred J.
Fred J.

Reputation: 6029

Dynamic Template and undefined attribute value

Following this tutorial about Dynamic templates with dynamic data, I am getting console error when the click event is fired on any of the items.

Uncaught ReferenceError: template is not defined in main_menu.js

in the line indicated in the code below. I am not sure why and would like to understand not just fixed. Many Thanks

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>

Upvotes: 2

Views: 70

Answers (3)

Sai Ram
Sai Ram

Reputation: 4392

you didn't add template as parameter to the event . 'click .menuItem': function (event).

Try this 'click .menuItem': function (event,template)

Upvotes: 1

Faysal Ahmed
Faysal Ahmed

Reputation: 1542

just need to update your event parameter.

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

Upvotes: 1

Kishor
Kishor

Reputation: 2677

Your event listener will be passed template instance as a second parameter. Replace 'click .menuItem': function (event) { with 'click .menuItem': function (event, template) {. This will solve the problem.

Upvotes: 0

Related Questions