meteor - Set default value if nothing is selected -
the code below expected set headerlabel "select item" when app first starts. once item selected, headerlabel expected show item name. able second parts not first. thanks
//---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 main menu "); } }); template.header.helpers({ headerlabel: function(){ var selected = session.get('selecteditem'); if (selected === "") { headerlabel: "select 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>
very simple actually:
<h3><label class="col-xs-8 text-center">{{#if headerlabel}}{{headerlabel}}{{else}}default value{{/if}}</label></h3>
and in js code can do
template.header.helpers({ headerlabel: function(){ return session.get('selecteditem'); } });
Comments
Post a Comment