0
下面的代码预计在应用第一次启动时将headerLabel设置为“Select a Item”。然后,一旦选择了一个项目,headerLabel就会显示项目名称。我能够把它做到第二部分,但不是第一部分。由于如果没有选择任何内容,则设置默认值
//---main_menu.js-----------------------
Template.mainMenu.helpers({
menuItems: [
{menuItem: "task1"},
{menuItem: "task2"},
{menuItem: "task3"},
{menuItem: "task4"},
{menuItem: "task5"},
{menuItem: "task6"},
{menuItem: "task7"}
]
});
Template.mainMenu.events({
'click .menuItem': function(event){
Session.set('selectedItem', $(event.currentTarget).data('value'));
}
});
//---header.js-----------------------
Template.header.events({
'click .mainMenu': function(){
alert("show the main menu ");
}
});
Template.header.helpers({
headerLabel: function(){
var selected = Session.get('selectedItem');
if (selected === "") {
headerLabel: "Select an item";
} else {
return selected;
}
}
});
//---main_menu.html--------------------
<template name="mainMenu">
<div class="container">
<div class="row">
<section class="col-xs-12">
<div class="list-group">
{{#each menuItems}}
<a href="#" class="list-group-item menuItem" data-value={{menuItem}}>
<img src="/abc.png">
{{menuItem}} <span class="badge">></span>
</a>
{{/each}}
</div>
</section>
</div>s
</div>
</template>
//---header.html-----------------------
<template name="header">
<h1>
<button class="col-xs-2 mainMenu" type="button">☰</button>
</h1>
<h3><label class="col-xs-8 text-center">{{headerLabel}}</label></h3>
<h1>
<button class="col-xs-2" type="button">⋮</button>
</h1>
</template>