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>
Related
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.
I am trying to covert a Django template to a Handlebars.js template. In the django template I used: if forloop.counter in Dinsdag I'm trying to make a custom helper in Handlebars.js that does the same thing. This is what I have so far:
helper.js:
Handlebars.registerHelper('isIn', function(waarde, inWaarde){
$.each($.parseJSON(inWaarde), function(k, v) {
if (k == waarde){
return options.fn(this);
}
});
return options.inverse(this);
});
data.js:
$(function(){
var templateScript = $("#entry-template").html();
var theTemplate = Handlebars.compile(templateScript);
var context = { "dinsdag": {
"uitval2": {
"7": "1",
"9": "1",
"11": "1"
},}}
var html = theTemplate(context);
$('.test').html(html);
$(document.body).append(html);
})
index.html:
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js">
</script>
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="helper.js"></script>
<script src="data.js"></script>
</head>
<body>
<script id="entry-template" type="text/x-handlebars-template">
<ul class="test">
{{#dinsdag}}
{{#isIn 7 uitval2}}
<p>klopt</p>
{{else}}
<p>mwah</p>
{{/isIn}}
{{/dinsdag}}
</ul>
</div>
</div>
</script>
</body>
</html>
This doesn't put anything on screen, and gives the following error:
Uncaught SyntaxError: Unexpected token o
Hoping that someone could help. Keep in mind that I'm a total noob at Handlebars.js
So the problem was that Handlebars "stringifies" JSON automatically.removing $.parseJSON didn't solve it though, I had to specify that it was JSON to jQuery. I did this like this:$.each($.parseJSON(JSON.stringify(inWaarde))
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>
I just started playing around with backbone.js and am enjoying the quirks of using it.
However am trying to use it for handling events in views for a site am working on.
Am also using namespaces to organise my code
var App = App || {};
App.Views = App.Views || {};
App.Views.Sidebar = Backbone.View.extend({
el: '#app-wrapper',
events : {
"click #rf":"test"
; },
test: function(e) {
alert("testing");
}
})
}
});
Heres the html, its just a skeleton of the site
<html>
<head>
<title>Shopping List</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
App.Views.Sidebar;
</script>
</head>
<body>
<div id="app-wrapper">
<div id="app-header">
<ul>
<li id="rf">Test</li>
</ul>
</div>
</div>
</body>
</html>
However this snippet doesn't seem to work, the test() method is not called when click the #rf element.
Am doing something wrong, am pretty new to this.
You have not instantiated your view. Try something like this:
var myView = new App.Views.Sidebar();
(instead of: App.Views.Sidebar; )
Also don't forget to instantiate your views once the document has been loaded. Something like this (if you use JQuery):
$(function() {
// Initialize Backbone views.
var myView = new App.Views.Sidebar();
});
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>