2016-02-16 26 views
2

關於使用動態數據的動態模板this tutorial,當點擊事件觸發任何項目時,出現控制檯錯誤。動態模板和未定義的屬性值

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>

回答

0

事件偵聽器將通過模板實例作爲第二個參數。將'click .menuItem': function (event) {替換爲'click .menuItem': function (event, template) {。這將解決問題。

1

您沒有將模板作爲參數添加到事件中。 'click .menuItem': function (event)

試試這個'click .menuItem': function (event,template)

1

只需要更新您的活動參數。

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