如果沒有選擇任何內容，則設置默認值

Question

下面的代碼預計在應用第一次啓動時將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>

Answer 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'); 
    } 
});