What source files should be included for Handlebars 4.0.2? - javascript

I'm just getting started with Handlebars.js and I'm already confused by what should be included in my HTML.
I set up a minimal helloworl HTML file that looks like:
<html>
<body>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
document.write(html);
</script>
</body>
</html>
and I get the following error:
[Error] TypeError: undefined is not a function (evaluating 'Handlebars.compile(source)')
global code (index.html, line 17)
What other dependency should be included for this minimal example to work?
Versions used:
jQuery 2.1.4
handlebars 4.0.2


Your call to bower_components/handlebars/handlebars.runtime.js overwrites what bower_components/handlebars/handlebars.js sets up.
Using handlebars.runtime.js implies that your templates are already compiled and thus the Handlebars object you get does not include a compile function.
Remove <script src="bower_components/handlebars/handlebars.runtime.js"></script>and you should be good to go : http://jsfiddle.net/nikoshr/dr3gwh7u/
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
$('body').append(html)
</script>

Related

How would I reference exif.js in a Javascript file as I can't use getExif?

I am trying to use exif.js on my HTML page, but I don't think I'm referencing the exif.js file correctly, as window.onload = getExif returns an error saying it's undefined.
I have tried adding <script src="exif.js type="text/javascript"></script> to my HTML file and referencing my other file with <script src="myscript.js" type="text/javascript"></script> as well. It still doesn't seem to be working.
HTML:
<html>
<head>
<script src="exif.js" type="text/javascript"></script>
<script src="myscript.js" type="text/javascript"></script>
</head>
<body>
<img src="myimage.png" alt="" id="image">
<div>
<span id="metadata"></span>
</div>
</body>
</html>
Javascript:
window.onload = getExif;
img = document.getElementById("image")
EXIF.getData(img, function() {
var allMetaData = EXIF.pretty(this);
var allMetaDataSpan = document.getElementById("metadata");
allMetaDataSpan.innerHTML = JSON.stringify(allMetaData,null, "\t");
});
The error I got was Uncaught ReferenceError: getExif is not defined. I'm not sure if I'm doing something wrong or not because everything looks good to me. Any help would be greatly appreciated.

You have no function named getExif defined. It's not something special exported or defined by exif.js, but simply a pattern they were following in the documentation examples. I imagine what you were going for is:
window.onload = getExif;
function getExif() {
var img = document.getElementById("image");
EXIF.getData(img, function() {
var allMetaData = EXIF.pretty(this);
var allMetaDataSpan = document.getElementById("metadata");
allMetaDataSpan.innerHTML = JSON.stringify(allMetaData,null, "\t");
});
}

Handlebars not displaying the content

So I am starting with Handlebars.js and I don't really know the ins and outs. Please be patient with me.
I have three files, test.html, test.js and data.js. I want test.html to display the data in data.js, through the Handlebars in test.js. However, no content can be seen. I think the solution probably lies in calling a function somewhere, but I don't know what function, nor where.
Here are the codes:
test.html
<head>
<script src="js/jquery.js">
</script>
<script src="js/handlebars-v3.0.3.js">
</script>
<script src="test.js">
</script>
<script src="data.js">
</script>
<script src="js/bootstrap.js">
</script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/gallery.css" rel="stylesheet">
</head>
<body>
<script id="image-templatexxx" type="text/x-handlebars-template">
{{name}}</br>
{{author}}</br>
<img style="height:600" src="{{src}}" />
</script>
<div id="test-content">
</div>
</body>
data.js
var testdata = {
src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/600px-The_Earth_seen_from_Apollo_17.jpg ",
name: "The Earth seen from Apollo 17",
author: "Ed g2s"
};
test.js
var source = $("#image-templatexxx").html();
var testtemplate = Handlebars.compile(source);
var testhtml = testtemplate(testdata);
$('#test-content').html(testhtml);
Thanks a lot for this.

Please include data.js before test.js. Otherwise testdata is undefined at the time of generating the html string using handlebars. The below code
$(document).ready(function() {
var testdata = {
src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/600px-The_Earth_seen_from_Apollo_17.jpg ",
name: "The Earth seen from Apollo 17",
author: "Ed g2s"
};
var source = $("#image-templatexxx").html();
var testtemplate = Handlebars.compile(source);
var testhtml = testtemplate(testdata);
$('#test-content').html(testhtml);
});
Works for me.

jQuery templates fundamentals

I've got two items in a data object which should subsitute two expressions within my html file. However this is somehow not working. Do you guys know what I am doing wrong?
<head>
<script src="jquery-1.11.3.js"></script>
<script src="handlebars-v4.0.5.js"></script>
</head>
<body>
<script type="text/x-handlebars-template">
var source = $("#template").html();
var template = Handlebars.compile(source);
var data = {
title:"The Earth seen from Apollo 11",
author:"Ed g2s",
};
var html = template(data);
</script>
<script id="template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<h3>{{author}}</h3>
</script></body>

Pass Variable To Auto Complete JavaScript

I have this basic auto complete JavaScript that works well, but you need to hard code the web page. What I'm trying to do is send the "Autocomplete" variable data to the page using a Perl script
The working JavaScript code looks like this:
var CustomArray = new Array('an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML');
Now the new code is:
var CustomArray=new Array(Autocomplete);
And the Perl script is sending back the data to the browser looking like this:
var Autocomplete = 'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML'
I also tried
var Autocomplete = ['an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML']
But I get: 'an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML' All as one string in the auto complete.
I cant seem to get it to work right. Full HTML code is below.
<html>
<head>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<script language="JavaScript1.2" type="text/javascript" src="http://www.ComicInvasion.com/cgi-bin/Autocomplete.pl"></script>
<script>
var CustomArray=new Array(Autocomplete);
</script>
</head>
<body>
<input type='text' style='font-family:verdana;width:300px;font-size:12px' id='ACMP' value=''/>
<script>
var obj = actb(document.getElementById('ACOMP'),CustomArray);
</script>
</body>
</html>

First, it looks like there is a typo. The id of your input element is ACMP whereas you pass 'ACOMP' to getElementById.
Second, you do not provide the source code for your Perl script. It might look like this:
#!/usr/bin/perl
use utf8;
use strict; use warnings;
use CGI();
local $| = 1;
print CGI::header(
-type => 'text/javascript',
-charset => 'utf-8',
);
print <<JS;
var Autocomplete = [
'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML'
];
JS
With the following HTML, autocompletion works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<!-- Replace with the URI of your script -->
<script type="text/javascript" src="http://test:8080/cgi-bin/autocomplete.pl"></script>
</head>
<body>
<input type='text'
style='font-family:verdana;width:300px;font-size:12px'
id='ACOMP' value=''>
<script type="text/javascript">
var obj = actb(document.getElementById('ACOMP'), Autocomplete);
</script>
</body>
</html>
Finally, I find it curious that your JavaScript files live in a directory called Java.

Have the perl script return this:
var CustomArray = "an apple, alligator".split(',');
Or, if it has to be this it's okay too:
var CustomArray = "'an apple','alligator'".split(',');
Obviously, I omitted the rest of the items in there but you'd include all of them.

how do I get my mustache.js template file included?

I'm working with mustache.js for the first time. All the examples I'm finding seem to talk about putting everything inline, but I want my templates in external files so they can be used in multiple places. How do I do that? (I've got jQuery in my stack, if that makes a difference.)
So say I have:
template.html
{{title}} spends {{calc}}
data.js
var data = { title: "Joe", calc: function() { return 2 + 4; } };
index.html
<script type="text/javascript" src="data.js"></script>
<div id="target"></div>
<script type="text/javascript">
var template = ?????? // how do I attach the template?
var html = Mustache().to_html(template, data);
$('#target')[0].innerHTML = html;
</script>

template = $('.template').val();
Where your template is in the DOM...
<textarea class="template">
<h1>{{header}}</h1>
{{#bug}}
{{/bug}}
{{#items}}
{{#first}}
<li><strong>{{name}}</strong></li>
{{/first}}
{{#link}}
<li>{{name}}</li>
{{/link}}
{{/items}}
{{#empty}}
<p>The list is empty.</p>
{{/empty}}
</textarea>
You could also render multiple templates directly into your page...
<script id="yourTemplate" type="text/x-jquery-tmpl">
{{tmpl "#yourTemplate"}}
<div>Something: ${TemplateValue}</div>
</script>

Categories