I am new to Handlebars JS and just trying to understand them.
I am trying to implement handlebars on a data that contains array of hashes.
Here is my script:-
<div id="test"></div>
<script id="template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<h2>{{body}}</h2>
</script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script>
$(document).ready(function (){
var source = $("#template").html();
var template = Handlebars.compile(source);
var context = [{title: "ABC",body: "DEF"},{title: "GHI",body:"JKL"}];
console.log(context);
var ht = template(context);
console.log(ht);
$("#test").html(ht);
});
</script>
Nothing is displayed on the output
How to use the handlebars template to access an array of hashes. Ex- variable context in the above script.
Can we use handlebars only on hashes ?
Can anyone please explain me this.
Thanks
You can iterate through collection using {{#each}} helper. In your case it would be something like this:
{{#each this}}
<h1>{{title}}</h1>
<h2>{{body}}</h2>
{{/each}}
Of course we can use it only on hashes - just try.
You might find reading this useful: http://handlebarsjs.com/builtin_helpers.html
I hope your script tag doesn't look like in your post and it actually doesn't lack of "http" part
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
Related
I use handlebars.js with keystone.js. So to embed values inside my <script type="text/x-handlebars-template"> templates I add \ before handlebars expressions. Like this:
<script type="text/x-handlebars-template">
<img src="\{{mainImage}}">
</script>
The problem is embedding of helper value. I tried to use default cloudinaryUrl helper but it doesn't work:
<script type="text/x-handlebars-template">
<img src="\{{{cloudinaryUrl mainImage quality='auto' format='jpg'}}}"
</script>
I see Missing helper: "cloudinaryUrl" message in my console.
How can I fix it?
I have no clue if this is even possible, but I have spent a lot of time trying to figure out how to do it. I have an array of string values in my .js file which include html tags. An array similar to this:
var values = [
<h1>Introduction</h1>,
<h3>Words</h3>,
<p>More words</p>
]
I am attempting to have them inserted into a handlebars template, but I can't seem to find a way to do it. I have tried using a variation of a {{ #each _ }} method for node.js to no avail. Please let me know how to do this, or if it's even possible.
Here's my current code. I am trying to just get the array of data to display when it's hard-coded in the html. I am getting no errors, but the code does not display.
eSOMS Tutorial
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="c://node.js/server.js"></script>
</head>
<body>
<script id="content-template" type="text/x-handlebars-template">
{{#each data}}
{{this}}
{{/each}}
</script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
'<h1>Introduction</h1>',
'<h3>The Enterprise Shift Operations Management System</h3>',
'<p>The Enterprise Shift Operations...</p>',
'<p>The purpose of this tutorial is to...</p>'
];
if(!Handlebars.templates){ Handlebars.templates = {}; }
Handlebars.templates.full = Handlebars.compile($("#content-template").html());
$('#output').html(Handlebars.templates.full({data: data}));
});
</script>
<div id='output'></div>
</body>
</html>
There's much more code but I think I've got everything relevant.
I have used this tutorial to create a JS based widget. One thing I need to do is to pass query string parameters in JS file. I tried document.location.href but it gave the URL of page where widget was placed(which is quite obvious)
Code is given below:
<script src="http://example.com/widget.js?id=2" type="text/javascript"></script>
<div id="widget"></div>
I need to fetch id=2 which I can pass further.
Thanks
If you give your script an id then you can write:
<script src="http://example.com/widget.js?id=2" id="myscript" type="text/javascript"></script>
<div id="widget"></div>
<script>
var myScript = document.getElementById('myscript');
var src= myScript.getAttribute('src');
//Get the id from the src based on parameter using Regular Expression
</script>
I am writing a .hbs file in Webstorm 8. It looks similar to the code below.
<!-- some html -->
<script type="text/javascript">
var {{name}} = '{{value}}';
</script>
WS marks the code as erroneous: "Expected new line or semicolon", "Variable name expected"
Is it that I am doing something wrong or is it a limitation in the WS handlebars inspector? Is there a workaround?
Try changing your code as follows:
<script type="text/x-handlebars">
var {{name}} = '{{value}}';
</script>
Does anyone know how I can print an .hbs/.handlebars template in an HTML page? I've looked everywhere but I cannot figure out how to put the .hbs files in a directory and then print them in my index.html. Sorry for the question, but I am a new user of handlebars. Thanks in advance!
Let's say you have a handlebars template post.handlebars:
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
Use handlebars precompiler to compile your templates:
$ handlebars post.handlebars -f templates.js
Include the compiled templates and handlebars runtime in your html doc
<script src="/libs/handlebars.runtime.js"></script>
<script src="templates.js"></script>
Now the compiled template will be accessible as a property of Handlebars.templates. Next pass data to the template, generate some html and append it to the DOM.
<script type="text/javascript">
var template = Handlebars.templates.post;
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
$(document).append(html);
</script>
See http://handlebarsjs.com/precompilation.html for details on precompile. Also there is a great handlebars tutorial here: http://javascriptissexy.com/handlebars-js-tutorial-learn-everything-about-handlebars-js-javascript-templating/
Save your hbs file as a fragment file. Say myTemplate.jspf
Include this in your HTML/JSP file as below
<script type="text/x-handlebars-template">
<%# include file="myTemplate.jspf" %>
</script>