Question

关于动态数据的动态模板this tutorial之后，我没有在task1或task2上触发click事件时动态显示模板。

我想知道为什么以及如何解决它。非常感谢

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 () {  <<---MY IDE SAYS UN USED PROPERTY taskData -------
    return Template.instance().selectedItem.get();
    
  }
});

Template.mainMenu.events({
  'click .menuItem': function (event, template) {
    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")); 
  }
});

<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">
  task is {{ this }}
  <form>
    <input type="text" name="task1Number">
    <input type="submit">
  </form>
</template>

<template name="task2">
  task is {{ this }}
</template>

动态数据动态模板

0 个答案: