nt2
July 19, 2016, 9:58am
1
I have a file named “output_functions.php” with three separate functions for head, body and footer.
All these three functions have html and js code in them.
What I am trying to do is, create three separate hbs files and then link them in a html file and basically get rid of the php code since there is nothing dynamic functionallity on that page.
This is the code i want to convert to hbs file.
function nav($active, $navbar_class = 'navbar-default ec-white-bg'){
$features = '';
$pricing = '';
$resources = '';
$customers = '';
if($active == 'features'){
$features = 'active';
}
elseif($active == 'pricing'){
$pricing = 'active';
}
elseif($active == 'customers'){
$customers = 'active';
}
elseif($active == 'resources'){
$resources = 'active';
}
echo '<nav class="navbar container '. $navbar_class . ' container-fluid" role="navigation">
<div class="row login-row">
<span class="login-buttons pull-right">
<!--<a class="callback-link">Request a callback?</a>-->
<a class="btn btn-large" href="/signin.php" style="border-right: solid 1px white;">LOGIN</a>
<a class="btn btn-large" href="/signup.php">REGISTER</a>
</span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/features.php" class="' . $features . '">gdfg</a></li>
<li class="dropdown-link">
<a data-toggle="dropdown" class="dropdown dropdown-toggle ' . $customers . '" role="button" aria-expanded="false">WHO USES IT? <span class="dropdown-icon"><i class="fa fa-sort-desc"></i></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/features/campaign_manager.php">gdg</a></li>
<li><a href="/features/constituency_manager.php">gfh</a></li>
<li><a href="/features/issues_and_advocacy.php">gsz</a></li>
</ul>
</li>
<li><a href="/pricing.php" class="' . $pricing . '">hfdh</a></li>
<<li><a href="http://blog.ecanvasser.com/">hdfgh</a></li>
<li class="dropdown-link">
<a data-toggle="dropdown" class="dropdown dropdown-toggle ' . $resources . '" role="button" aria-expanded="false" >RESOURCES <span class="dropdown-icon"><i class="fa fa-sort-desc"></i></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/about_us.php">hsdfg</a></li>
<li><a href="/resources/webinars.php">shg</a></li>
<li><a href="/resources/nationbuilder.php">hsfgh</a></li>
</ul>
</li>
<li><a href="http://support.ecanvasser.com">hsgfh</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>';
}
I have being studying handler-bars but unable to figure out how to convert those php functions into hbs. Any help would be great. thanks.
The documentation seems pretty clear to me, give it a shot and show us how far you get.http://handlebarsjs.com/
The only PHP feature you’re using is string interpolation
' . $features . '
can be replaced with
{{$features}}
1 Like
nt2
July 19, 2016, 2:13pm
3
hey, thanks for replying.
so you mean to say, all those PHP variables can be writtern as {{$variable}} ??
Pretty much but they’ll be JavaScript variables, make the template first.
<script id="nav-template" type="text/x-handlebars-template">
<nav class="navbar">
</nav>
</script>
Then you’ll want to do something like this to render it.
var source = $("#nav-template").html();
var template = Handlebars.compile(source);
var data = {
active: 'features',
navBarClass: 'navbar-default ec-white-bg'
};
var html = template(data);
$('#nav-wrappper').html(html)
1 Like
nt2
July 19, 2016, 3:30pm
5
did as you said. but unable to render anything. Basically, its all appearing to be blank. No errors in console though
I have three different .hbs files comprising the code of header, nav and footer respectively. And then I have linked them to index.html.
Below is the code of my index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" ></script>
<script id="header" src="header.hbs" type="text/x-handlebars-template"></script>
<script id="nav" src="nav.hbs" type="text/x-handlebars-template"></script>
<script id="footer" src="footer.hbs" type="text/x-handlebars-template"></script>
<script type="text/x-handlebars">
var theTemplateScript = $("#header").html();
var temp = Handlebars.compile(theTemplateScript);
$(document.body).append (temp);
var source = $(".nav").html();
var template = Handlebars.compile(source);
var data = {
active: 'features',
navBarClass: 'navbar-default ec-white-bg'
};
var html = template(data);
$('.nav-wrappper').html(html);
var source = $(".foo").html();
var navTemplate = Handlebars.compile(source);
var html = template(navTemplate);
$('.container-wrapper').html(html);
</script>
</head>
</html>
This code puts the html in the variable into that element, it needs to exist in the page.
<body>
<div class="nav-wrappper"></div>
</body>
If that doesn’t work for you please post an example online so we can take a look.
The space here may also break things.
$(document.body).append (temp);
1 Like
nt2
July 19, 2016, 3:45pm
7
thanks for repying.
below is my
nav.hbs
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" ></script>
</head>
<body>
<script id="nav" type="text/x-handlebars-template">
<div class="navbar">
<div class="nav-wrappper">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/features.php" class="' . {{features}} . '">FEATURES</a></li>
<li class="dropdown-link">
<a data-toggle="dropdown" class="dropdown dropdown-toggle ' . {{customers}} . '" role="button" aria-expanded="false">WHO USES IT? <span class="dropdown-icon"><i class="fa fa-sort-desc"></i></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/features/campaign_manager.php">Campaign Managers</a></li>
<li><a href="/features/constituency_manager.php">Constituency Managers</a></li>
<li><a href="/features/issues_and_advocacy.php">Issues & Advocacy</a></li>
</ul>
</li>
<li><a href="/pricing.php" class="' . $pricing . '">PRICING</a></li>
<li><a href="http://blog.ecanvasser.com/">BLOG</a></li>
<li class="dropdown-link">
<a data-toggle="dropdown" class="dropdown dropdown-toggle ' . {{resources}} . '" role="button" aria-expanded="false" >RESOURCES <span class="dropdown-icon"><i class="fa fa-sort-desc"></i></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/about_us.php">About</a></li>
<li><a href="/resources/webinars.php">Webinars & eBooks</a></li>
<li><a href="/resources/nationbuilder.php">NationBuilder Integration</a></li>
</ul>
</li>
<li><a href="http://support.ecanvasser.com">SUPPORT</a></li>
</ul>
</div>
</div>
</div>
</script>
</body>
Ok, there’s lots of misunderstanding, this should help get you going.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" ></script>
</head>
<body>
<div id="nav-wrapper"></div>
<script id="nav-template" type="text/x-handlebars-template">
<div class="navbar">
<p class={{ navBarClass }}>Hello {{ active }}</p>
</div>
</script>
<script type="text/javascript">
var source = $("#nav-template").html();
var template = Handlebars.compile(source);
var data = {
active: 'features',
navBarClass: 'navbar-default ec-white-bg'
};
var html = template(data);
$('#nav-wrapper').html(html);
</script>
</body>
</html>
1 Like
nt2
July 20, 2016, 9:43am
9
hi, thanks so much. thats did gave me a little better understanding.
just to let know.
this is my nav.hbs file after doing the edits.
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" ></script>
</head>
<body>
<div id="nav-wrapper"></div>
<script id="nav-template" type="text/x-handlebars-template">
<div class="navbar">
<p class={{ navBarClass }}>{{ active }}</p>
</div>
</script>
<script type="text/javascript">
var source = $("#nav-template").html();
var template = Handlebars.compile(source);
var data = {
active: 'features','customers','resources',
navBarClass: 'navbar-default ec-white-bg'
};
var html = template(data);
$('#nav-wrapper').html(html);
</script>
</body>
</html>
This is my index.html file
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" ></script>
</head>
<body>
<script id="header" src="header.hbs" type="text/x-handlebars-template"></script>
<script id="nav-template" src="nav.hbs" type="text/x-handlebars-template"></script>
<script id="footer" src="footer.hbs" type="text/x-handlebars-template"></script>
</body>
</html>
There are no errors in console. but I am still unable to display content. thanks again.
No, that file should be index.html
And this is not valid JavaScript.
var data = {
active: 'features','customers','resources',
navBarClass: 'navbar-default ec-white-bg'
};
If you try putting that in a JavaScript console you’ll see the error.
I think before trying to implement something like Handlebars you need a more thorough understanding of JavaScript basics.
This is a good one:http://eloquentjavascript.net/00_intro.html
1 Like
nt2
July 20, 2016, 10:07am
11
oh ok.
So, allow let me tell you the whole thing and aplogies if I didn’t explained this earliear.
I have a file named “output_functions.php” with three separate functions for head, body and footer.
This file has three functions header, nav and footer containg there respective codes.
All these three functions have html and js and php code in them.
What I am trying to do is, create three separate hbs files and then link them in a html file and basically get rid of the php code since there is nothing dynamic functionallity on that page.
I am sorry but I am a kinda noob, so what should I be exactly doing ? thanks again.
I also have the same problem like you
nt2
July 20, 2016, 11:29am
14
alright. I think I have got a solution.
Create, default.handlebars and put all the connceting links and scripts in that file.
Run, handlebars templates/footer.handlebars -f hb.js … http://handlebarsjs.com/precompilation.html
and in your default.handlebars do something like this
<script type="text/javascript">
var source = Handlebars.templates.footer();
$(document).ready(function () {
$("#footer").html(source);
});
</script>
this resolved my problem.
Take another look at post #8 , save that content as index.html and run it. It will substitute the values of the variables into the template strings with {{variableName}}. That’s all handlebars is.
Then the answer’s the same, look at post #8 it contains a working example of Handlebars.
First include all three templates as scripts in the same file as the html(index.html), once they’re working it’s easy to move that content into their own files.
system
October 19, 2016, 8:50pm
17
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
Ok. Precompiling the templates is purely a performance improvement so shouldn’t change if something works or doesn’t work.