Open Event Webapp uses handlebar partials for optimizing code. We can reuse a template using Handlebars partial.
How to use Handlebars partial ?
To use Handlebars partial, we have to follow some easy steps:
Step 1: In the .hbs file containing code, register your partial by using function Handlebars.registerPartial
Handlebars.registerPartial('myPartial', '{{name}}')
Step 2: Calling the partial
{{> myPartial }}
In Open-Event Webapp we have made partials for common templates like navbar and footer.
1. // Navbar template (navbar.hbs) <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header navbar-left pull-left"> <a class="navbar-brand" href="{{ eventurls.main_page_url }}"> {{#if eventurls.logo_url}} <img alt="{{eventurls.name}}" class="logo logo-dark" src="{{ eventurls.logo_url }}"> {{else}} {{ eventurls.name }} {{/if}} </a> </div> <div class="navbar-header navbar-right pull-right"> <ul style="margin-left:20px" class="nav navbar-nav pull-left"> {{#sociallinks}} {{#if show}} <li class="pull-left"><a href="{{link}}" style="padding-right:0; padding-left:0;margin-left:15px"><i class="fa fa-lg fa-{{icon}}" aria-hidden="true" title="{{{icon}}}"></i></a></li> {{/if}} {{/sociallinks}} </ul> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="margin-left:1em;margin-top:1em;"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="hidden-lg hidden-md hidden-sm clearfix"></div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="navlink"><a id="homelink" href="index.html">Home</a> {{#if timeList}} <li class="navlink"> <a id="schedulelink"href="schedule.html"> Schedule</a> </li> {{/if}} {{#if tracks}} <li class="navlink"> <a id="trackslink" href="tracks.html">Tracks</a> </li> {{/if}} {{#if roomsinfo}} <li class="navlink"> <a id="roomslink" href="rooms.html">Rooms</a> </li> {{/if}} {{#if speakerslist}} <li class="navlink"> <a id="speakerslink" href="speakers.html">Speakers</a> </li> {{/if}} </ul> </div> </div> </nav>
//Compiling Template by providing path 2. const navbar = handlebars.compile(fs.readFileSync(__dirname + '/templates/partials/navbar.hbs').toString('utf-8'));
// Register Partial 3. handlebars.registerPartial('navbar', navbar);