2016-02-08 72 views
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">&#x3e;</span> 
 
      </a> 
 
      {{/each}} 
 
     </div> 
 
     </section> 
 
    </div>s 
 
    </div> 
 
</template> 
 

 
//---header.html----------------------- 
 
<template name="header"> 
 
    <h1> 
 
    <button class="col-xs-2 mainMenu" type="button">&#9776;</button> 
 
    </h1> 
 
    <h3><label class="col-xs-8 text-center">{{headerLabel}}</label></h3> 
 
    <h1> 
 
    <button class="col-xs-2" type="button">&#8942;</button> 
 
    </h1> 
 
</template>

回答

1

很简单,实际上是:

<h3><label class="col-xs-8 text-center">{{#if headerLabel}}{{headerLabel}}{{else}}Default value{{/if}}</label></h3> 

而且在JS代码你可以做

Template.header.helpers({ 
    headerLabel: function(){ 
    return Session.get('selectedItem'); 
    } 
}); 
相关问题