Is there any way to load handlebars templates more simply? Seems like an easy thing to be able to do. If I have the following code for index.html:
<body>
<h1>From the index.html</h1>
<div id="hbs"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script id="test" type="text/x-handlebars-template">
<h2>This is from HBS</h2>
<p>
hbs generated this p tag!
</p>
</script>
<script src="js/script.js"></script>
</body>
Here's the code for the script to compile the template in js/script.js:
var template = Handlebars.compile(document.querySelector("#test").innerHTML)
document.querySelector("#hbs").innerHTML = template({})
This works fine,but when I open the index.html I can see the header and p tag generated through the template. There has to be an easy way to abstract this template into a separate file!
You can put your template in a hbs file :
template.hbs:
<script type="text/x-handlebars-template">
<h2>This is from HBS</h2>
<p>
hbs generated this p tag!
</p>
</script>
And then use ajax to get your file instead of a querySelector to get your html
$document.ready(function(){
$.get( '/url/template.hbs', function( source ) {
var template = Handlebars.compile(source);
document.querySelector("#hbs").innerHTML = template({});
}
});
Related
I want to implement this example code from w3schools.com using Django. The code loads a text file into a html file using the jquery load() function. The code looks like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
My question is now, how do I store my text file such that the load function has access to it in my Django project?
Put the 'demo_test.txt' in your static folder and make sure to specify your static url in settings. Let's say your static url is "cdn" pointing to folder "static". In that case you could use $("#div1").load("/cdn/demo_test.txt");
In settings.py:
STATIC_URL = '/cdn/'
STATIC_ROOT = '/path/to/your/static'
I have imported an external local html file (index2.html) into my html file's div (index.html, #container). I want to use angular to bind data values to some of the tags in the imported html file.
Here's my code so far - http://plnkr.co/edit/APXdpQzRUOfGehqSAJ9l?p=preview
index.html
<div id="container" ng-app="myApp" ng-controller="myController"></div>
<script type="text/javascript">
$(function() {
$("#container").load("index2.html");
});
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.name = "test";
});
</script>
index2.html
<div id="container2">
<p>test content:</p>
<p>{{name}}</p>
</div>
However, it just shows up as the text {{name}} - not 'test'. I've tried placing 'ng-app' and 'ng-controller' in #container2 instead but it's still the same.
Mixing AngularJS and jQuery was asking for trouble!
I found my answer - I used ng-include to import the html instead of the load function.
<div id="container" ng-include="'index2.html'" ng-app="myApp" ng-
controller="myController"></div>
I have 2 HTML pages (page1.html and page2.html) and 1 data source. I'm able to display the handlebars data in page1.html by essentially making the entire page into a template
page1.html:
<body>
<div class="row" id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
<h1>{{Title}}</h1>
</script>
data.js
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var gData = {
title: 'My Website'//,...
}
$("#content-placeholder").html(template(gData));
This works, but I'd like to display part of the same data object on the second html page.
page2.html
<body>
<div class="row" id="content-placeholder2"></div>
<script id="second-template" type="text/x-handlebars-template">
</script>
I tried using partials but I don't think that's the solution. How can I compile two templates?
Thanks!
I am trying to build a quiz application using Node express and Handlebars as the templating engine.
I have the following template:
<div id="quiz">
<div class="container">
<div class="row" id="quiz-header-row">
<div>
<div id="question-title"></div>
</div>
</div>
<div class="row" id="quiz-choices-row">
<div id="choices"></div>
</div>
<div class="row" id="quiz-footer-row">
<button id="quiz-next-btn" class="btn btn-success">Next</button>
</div>
</div>
</div>
<!-- Template -->
<script id="choices-template" type="text/x-handlebars-template">
<div>\{{choices}}</div>
<div>
{{#each choices}}
{{this}}
{{/each}}
</div>
</script>
If I do not use the backslash before curly braces, handlebars displays an empty string and thus I cannot write this:
<div>{{choices}}</div>
Found on handlebars official website that I have to use: \{{choices}}.
The javascript that fills the template with data:
renderChoices: function() {
var template = Handlebars.compile($('#choices-template').html());
var context = {
// array of quiz item choices
choices: Quiz.questions[Quiz.currentIndex].choices
};
$('#choices').html(template(context));
},
The issue I am facing is the #each block that does not display anything. The backslash before {{#each choices}} cannot be used as in the example above because the server throws "server internal error: 500".
This is the console logged context:
console log
The fiddle below works as needed and does not need the backslashes
fiddle.
But the exact same code I run in my project using Node does not display anything written inside the #each block.
I have Handlebars both on the server (express-handlebars) and on the client. Considering the results, I am doing something the wrong way.
Thank you in advance.
EDIT: Fixed by precompiling the templates in external files and including them as scripts in the view.
Try something like this:
{{#each choices as |choice|}}
{{choice}}
{{/each}}
And make sure choices is populated as you expect.
i just tried to execute your code it's printing the data, i have used jquery-2.2.1 and handlebars 2.0.0
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<script id="address-template" type="text/x-handlebars-template">
<div>
{{#each choices}}
{{this}}
{{/each}}
</div>
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js">
</script>
<script>
$(function () {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
choices: ["choice1","choice2","choice3"]
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
});
</script>
</body>
</html>
Here is a link to plunker, i also tried with handlebars 4.0.3 and jquery 3.1.1 it's running fine.
I'm playing around with Handlebars.js and trying to compile a small template. I am only using Handlebars.js and nothing more.
I am working locally on my computer, and not via any form of server.
my "html" looks like this. nothing special.
<!doctype html>
<html>
<head>
<script src="js/vendor/handlebars.min-4.0.4.js"></script>
</head>
<body>
<script id="menu-template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
</script>
<section id="menu">
</section>
<script src="js/menu.js"></script>
</body>
</html>
And my JS is
var source = document.getElementById('menu-template').innerHTML;
var template = Handlebars.compile(source);
var data = {title: "test"};
document.getElementById('menu').innerHTML = template(data);
It seems that template() does not return anything, i don't get any result except what looks like a empty string.
And i have been playing around with this for a few hours and searching the internet for answers but no result.
Am i doing anything wrong here?
// Edit added the rest of the html page.
The code seems correct just make sure the Handlebars.js file is properly included before the existing script tag.
Ref for Handlebars CDN : https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js