Handlebars not displaying the content - javascript

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.

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");
});
}

Javascript mocha testing "it" function never entered

I want to Test my JavaScript Code with the mocha and chai Library. I'm working from this tutorial.
I want to test the code at work, but i am not able to use node.js (security stuff).
The problem is that the describe function is entered but never called.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="IST-8859-1">
<title>Insert Title Here</title>
<link rel="stylesheet" type="text/css" ref="./mocha.css">
</head>
<body>
<div id="mocha"></div>
<script type="text/javascript" src="./mocha.js"></script>
<script type="text/javascript" src="./chai.js"></script>
<script>mocha.setup('bdd');</script>
<script type="text/javascript" src="./testmocha.js"></script>
<script>mocha.run</script>
</body>
</html>
JS
var assert = chai.assert;
describe('Array', function(){
console.log("inside2");
it("teest", function() {
console.log("it 01");
var arr = [];
assert.equal(arr.length, 0);
});
it("teests", function(){
var arr = [];
assert.equal(arr.length, 1);
});
console.log("inside3");
})
The console log "it 01" will never be shown.. but the "inside 2" and the "inside 3".
the html files stays empty.
Have anyone a idea?
You forgot the parentheses to invoke the .run function. Try this instead:
<script>mocha.run();</script>

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>

What source files should be included for Handlebars 4.0.2?

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>

simple dijit widget fail to initiliaze with AMD programming

I am trying to accomplish simple tasks with dojo's new AMD feature, and I don't get an error on the screen neither the result is being displayed....
I wanted to rewrite the first programmatic example dijit.Tree mentioned in the dojo reference guide:
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.ready(function(){
var store = new dojo.data.ItemFileReadStore({
url: "{{dataUrl}}/dijit/tests/_data/countries.json"
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store,
query: {"type": "continent"},
rootId: "root",
rootLabel: "Continents",
childrenAttrs: ["children"]
});
new dijit.Tree({
model: treeModel
}, "treeOne");
});
</script>
to the AMD version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" />
<script src="js/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
<script language="JavaScript">
var param = new Array(null,["dojo/dom","dijit/tree","dojo/data/ItemFileReadStore","dijit/tree/ForestStoreModel","dojo/domReady!"]);
require(param[1],function(dom,dtree,ifrs,fsm)
{
var store = new ifrs({url: "js/countries.json"});
var treeModel = new fsm({store: store,query: {"type": "continent"},rootId: "root",rootLabel: "Continents",childrenAttrs: ["children"]});
new dtree({model:treeModel},"treeOne");
});
</script>
</head>
<body class="claro">
<div id="treeOne">
</div>
</body>
</html>
Firebug doesn't whow me an runtime error, or doesn't tell me that something is missing. The page just stays empty. What did I make wrong?!
The main problem is how you build the param array and only use the first value in the array.
Also, dojo.ready is not the same as dojo/domReady!
require(["dojo/dom", "dijit/tree", "dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel", "dojo/ready"],
function(dom, dtree, ifrs, fsm, ready) {
ready(function() {
...
});
});

Categories