Source for handlebarsjs.com
ruby needs to be installed.
sudo gem install bundlebundlebundle exec rake buildbundle exec rake preview, then open http://localhost:3000bundle exec rake deploy
The second command in the Precompilation: Getting Started section is broken:
$ curl https://npmjs.org/install.sh | sh
It is throwing an error because the server is responding a 301 Moved Permanently (points to the same URL but with a 'www' added in the domain). Therefore, the fix is to change the command to:
$ curl https://www.npmjs.org/install.sh | sh
Cheers,
In the docs:
The if block helper
You can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "" or [](a "falsy" value), Handlebars will not render the block.
and it is true that handlebars treat [] as falsy as I tried on my local machine, but some implementation actually treats it as truthy: http://jsfiddle.net/K8zuV/2/
And in JavaScript, [] is actually truthy... the falsy ones are NaN, 0, -0, null, undefined, "", false. Somehow the docs doesn't mention the 0, and can the docs please add some note as to why [] is falsy and what is the spec here.
(0 and -0 are different as 1/a gives different results if a is 0 or -0)
Would you consider making it exactly the same as the JavaScript way as well?
(But I think I just found my answer here: http://stackoverflow.com/questions/16831270/is-foo-good-for-both-looping-and-conditional-in-handlebars so it is to be compatible as {{#foo}} ... {{/foo}} which can do loop, and [] is considered falsy because no execution at all is done.
But maybe this as well as the shorthand for loop and conditionals can be added to the docs too?
Thanks.
Hi,
I tried what is explained in the doc and this results in an error, it appears to not working :/
Doc should better explain the Bower installation, as new in JS world i didn't get that i had to compile the project first and than import the js from dist/.
The steps should be like:
"handlebars.js": "version_needed" in bower.jsonbower installbower_components foldernpm install (sudo may be needed!?)gruntindex.html or whatever the reference to the desired handlebar file e.g.,<script src="/app/bower_components/handlebars.js/dist/handlebars.js"></script>
Current text:
Parameters are passed to helpers in the order that they are passed, followed by the block function.
Should be:
Parameters are passed to helpers in the order that they are passed, followed by the options hash.
Handlebars doesnt seem to support json objects with dots in the objects attribute names (e.g.):
{ "ns1.id" : 14, "ns2.name" : "mike" };
Is this an omission or am i overlooking something? We have services that we are required to consume that support namespaces in this way.
Thanks
ridiculously useful:
{{#each list}}
.. loop through list ..
{{else}}
.. display if list is empty ...
{{/each}}
needs some docs on the website. pull request forthcoming
D'uh! I posted this on the wrong repository! Sorry! x-posted here now: handlebars-lang/handlebars.js#920
It would save a small but not trivial amount of confusion if you replaced this (on http://handlebarsjs.com/ )
<script id="entry-template" type="text/x-handlebars-template">
template content
</script>
with this:
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
Thanks! Keep up the excellent work!
How can I pass a parameter to template?
that is:
my obj: {name:"pippo", lastname:"pluto"}
my template: TAG_HTML {{name}} {{#if isParam}} {{lastname}} {{/if}} TAG_HTML
How can I pass the param isParam into template if it isn't into object?
isParam is a condition external from Model Object ...
thanks
I'm in the very very beginning of Ember and following step-by-step the instructions of a good tutorial I found (Treehouse Workspaces). The following code is used in the index.html
<!DOCTYPE html>
<html lang="en-US">
<html>
<head>
<meta charset="utf-8">
<title>My Blog</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="libs/jquery-1.11.3.js"></script>
<script src="libs/handlebars-v3.0.3.js"></script>
<script src="libs/ember.debug.js"></script>
<script src="libs/ember-handlebars-loader-0.0.2.js"></script>
</head>
<body>
</body>
</html>
Having tried to run it just for syntax checking, an error was found in the ember-handlebars-loader js script: "SyntaxError: expected expression, got '<'", pointing to the 4th line of the code.
Following the link in the Inspector, the scrip of that lib appeared and pointed to "", its first statement.
It's the first time I'm looking at the language and at the lib, so I don't really know whether that DOCTYPE can be there (I thought it was only possible to be in the beginning of index.html and then all the scripts of libs would get it naturally).
Am I doing anything wrong or is there a bug here?
Thanks in advance
http://handlebarsjs.com/expressions.html mentions the term "segment-literal notation". Couldn't find anything on Google about what this means, and articles.[10].comments could be explained for non-expert JavaScript developers.
In the Expression documentation can you please clarify that the "segment-literal" notation is also applicable to top level property names.
For example, given this context:
{"some.thing": "something"}You can include the following expression in a template:
{{[some.thing]}}The following also work. Is that an accident, or something that can be documented?:
{{"some.thing"}}
{{'some.thing'}}Thanks
@kpdecker would you consider a pull request for the site to be generated with assemble.
Assemble is all javascript/node.js and uses handlebars as the core template engine. obviously I'm biased, but IMO this would make the site a little more approachable to the community -- obviously Handlebars/javascript users. So there is a better chance you'll get pull requests to update the docs (not to mention, seeing how you guys use handlebars templates and helpers on your own site would be extremely valuable and instructive for new users).
I'm about to start refactoring the lesscss.org site but as soon as that's finished I'd be happy to work on this site if you're interested.
Also, if it helps I can provide a summary of the general steps I would take during the conversion, and how it would be maintained afterwards. thanks
It's not obvious why nothing is being logged when using the log helper for the first time, when developing a new application. The documentation here makes it seem like it just works, when in fact it doesn't unless you explicitly set a low enough log level.
The only reference I could find to this issue (after a while trying to figure out if it was me doing something wrong) was the bug reports of people that also couldn't understand why nothing was being logged, and a very vague reference to log levels in this page. The problem with this reference is that it mentions the various log levels, and that it defaults to logging only error mode, but the log helper section doesn't mention that it is outputting messages with the INFO level. Also, if I was a new developer I probably wouldn't be very familiar with the standard error level hierarchy, so it's something that should also be better documented.
BTW, I only stumbled upon the reference to log levels by chance, since I would never have guessed that there was something in the Handlebars configuration that was preventing me from seeing log messages, or that I would need to read something unrelated to "Helpers" to get a helper working as intended.
handlebars-site / src / pages / reference.haml
Line 65: var template = Handlebars.precompile(templateSpec);
Probably should be:
var template = Handlebars.template(templateSpec);
I'm new to Handlebars, reading the docs. At http://handlebarsjs.com/expressions.html, I see a sudden switch from {{ ... }} in Basic Usage to {{{ ... }}} in Helpers, without any explanation, and with the grey highlight not covering the last }.
I presume the site explains at some point that they mean "don't escape the HTML", but that should be explained on the Expressions page, because most new users may land there if they follow the docs from / to "Learn more: expressions".
Also, the highlight issue should be fixed.
For the new user, this gets super confusing in the Iterators section, where double and triple mustaches are mixed together:
<div class="comments">
{{#each comments}}
<div class="comment">
<h2>{{subject}}</h2>
{{{body}}}
</div>
{{/each}}
</div>
Originally requested in handlebars-lang/handlebars.js#801
I call the {{#each}} for an array, which has just one element, but the result gives me one more
In http://handlebarsjs.com/expressions.html Whitespace Control section you can find code like this:
{{#each nav ~}}
<a href="{{url}}">
{{~#if test}}
{{~title}}
{{~^~}}
Empty
{{~/if~}}
</a>
{{~/each}}However I cannot find any documents about what does "^" mean.
Does "^" mean "else" in an if block?
Thank you very much.
http://handlebarsjs.com/reference.html refers to TrackId (singular) mode, but the option is TrackIds (plural)
Outside of the API ref, I don't see documentation for using prtials.
Definitely not a big issue, but came here to see what's new in 2.0 and noticed this (using IE11, doubt it matters). I swear, the header and content divs used to be center aligned in IE at one point, maybe something changed recently
ehbs.registerHelper('compare', function (lvalue, operator, rvalue, options) {
^
TypeError: Object #<ExpressHandlebars> has no method 'registerHelper'
I am trying to create a helper compare but while running the server it gives me above error.
The code is
var handlebars = require('express-handlebars');
var app = express();
var ehbs = handlebars.create({defaultLayout :'main'});
app.engine('handlebars', ehbs.engine);
app.set('view engine', 'handlebars');
console.log(ehbs);
ehbs.registerHelper('compare', function (lvalue, operator, rvalue, options) {
var operators, result;
if (arguments.length < 3) {
throw new Error("Handlerbars Helper 'compare' needs 2 parameters");
}
if (options === undefined) {
options = rvalue;
rvalue = operator;
operator = "===";
}
operators = {
'==': function (l, r) { return l == r; },
'===': function (l, r) { return l === r; },
'!=': function (l, r) { return l != r; },
'!==': function (l, r) { return l !== r; },
'<': function (l, r) { return l < r; },
'>': function (l, r) { return l > r; },
'<=': function (l, r) { return l <= r; },
'>=': function (l, r) { return l >= r; },
'typeof': function (l, r) { return typeof l == r; }
};
if (!operators[operator]) {
throw new Error("Handlerbars Helper 'compare' doesn't know the operator " + operator);
}
result = operators[operator](lvalue, rvalue);
if (result) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
Please help
hey I am trying to compile Handlebars with a list of 'knowHelpers', and I turn on the flag 'knownHelpersOnly' (following http://handlebarsjs.com/reference.html). However when I use helpers in the 'knowHelpers' list, an error is thrown saying an unknown helper is used.
Hiho,
A few typos from:
http://handlebarsjs.com/reference.html
"exection" ==> execution
"paritals" ==> partials
This may be super obvious to you guys working on this for a long time but I just realized it after trying to figure why my custom helper was expecting a CLOSE_RAW_BLOCK.
To unexperienced users like myself there doesn't seem to be any logic behind the naming of helper tokens at first. Sometimes they are like this {{#myHelper}} and sometimes they are like this {{myHelper}} but it's not obvious that the first one is the way to call a block helper and that there must be a {{/myHelper}} to match it. This confusion is compounded by the fact that even the {{else}} statement doesn't need a # while the {{#if}} does.
In the Block Helpers documentation it says:
Make sure you create a new data frame each time you invoke a block with data. Otherwise, downstream helpers might unexpectedly mutate upstream variables.
And illustrates calling createFrame() once per iteration of context. But in the API Reference documentation on createFrame() it says:
Generally only one frame needs to be created per helper execution, i.e. the
eachiterator only creates one frame which is reused for all child execution.
When precompiling I kept getting undefined when using precompiled templates. Found out that the precompiled version had the full template file name with extension. So the source file "template.html" would result in the compiled file having template["template.html"]. Removing the .html part made stuff work again.
Am I missing something here? Or do we have to manually remove file suffixes after compiling?
It would be nice if you could provide in http://handlebarsjs.com/precompilation.html page more information, like how the input file looks like? An example for a file would be great.
And how the compiled file will look like, if you compile the example one.
Thanks.
See my issue over at Stackoverflow:
http://stackoverflow.com/questions/28738650/why-am-i-getting-this-weird-8203-line-break/28741288#28741288
In short: When I get the content of the javascript string, I get zero width space values. This is not filtered by Handlebars. So when I append the result to the DOM, I get unwanted space.
My solution was to use regex to remove zero width space:
var source = $("#guideListTemplate").html().replace(/[\u200B]/g, '');
I think this is a bug as Handlebars should remove zero width space.
I really like the handebarsjs.com site, it is very user-friendly. However, consider adding a note at the top saying: "You can start using Handlebars by adding the handlebars.js file to your web-page. The newest version of this file is available here". This would help people who don't have experience with how GitHub works.
The "expressions" page states:
To reference a property that is not a valid identifier, you can use segment-literal notation
However, nowhere on that page it is defined what a valid identifier is.
In JavaScript, it's a word consisting of letters, digits, $, or _, with the exception that it cannot start with a digit. Is it the same for Handlebars? It would be useful if this information were provided on the site.
I asked this over on stack overflow and haven't seen an answer, so I'm reporting it here. Not sure if it is a defect, but I've got a test case that is pretty clear.
http://stackoverflow.com/questions/28817344/handlebars-js-with-jquery-gives-max-call-stack-exceeded
I'm getting started with handlebars.js. It works great, but I found a case of using it with jQuery that causes an infinite loop.
This fails:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
</head>
<body>
<h2>Template expansion</h2>
<div id="output"></div>
<h2>Raw Template:</h2>
<div id="ServiceResultTemplate">
{{#if isMutation}}<div style="color: red;">{{else}}<div style="color: green">{{/if}}
I am in color.
</div>
</div>
</body>
<script>
var serviceResult = {
"testID": "useMutator",
"isMutation": false,
}
var source = $('#ServiceResultTemplate').html();
var template = Handlebars.compile(source);
var result = template(serviceResult);
$('#output').html(result);
</script>
</html>
This works:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.js"></script>
</head>
<body>
<h2>Template expansion</h2>
<div id="output"></div>
<script id="entry-template" type="text/x-handlebars-template">
{{#if isMutation}}<div style="color: red;">{{else}}<div style="color: green">{{/if}}
I am in color.
</div>
</script>
</body>
<script>
var serviceResult = {
"testID": "useMutator",
"isMutation": false,
}
var source = document.getElementById('entry-template').innerHTML;
var template = Handlebars.compile(source);
var result = template(serviceResult);
document.getElementById('output').innerHTML = result;
</script>
</html>
If you run the first one in Chrome, you'll see this in the console after a few seconds:
Uncaught RangeError: Maximum call stack size exceeded
handlebars.js:2821 JavaScriptCompiler.createFunctionContexthandlebars.js:2724 JavaScriptCompiler.compilehandlebars.js:2398 compileInputhandlebars.js:2405 retVM31805:7 (anonymous function)jquery.js:328 jQuery.extend.globalEvaljquery.js:5430 jQuery.fn.extend.domManipjquery.js:5213 jQuery.fn.extend.appendjquery.js:5328 (anonymous function)jquery.js:3486 jQuery.accessjquery.js:5295 jQuery.fn.extend.htmlVM31801:8 (anonymous function)jquery.js:328 jQuery.extend.globalEvaljquery.js:5430 jQuery.fn.extend.domManipjquery.js:5213 jQuery.fn.extend.appendjquery.js:5328 (anonymous function)jquery.js:3486 jQuery.accessjquery.js:5295 jQuery.fn.extend.htmlVM31797:8 (anonymous function)jquery.js:328 jQuery.extend.globalEvaljquery.js:5430 jQuery.fn.extend.domManipjquery.js:5213 jQuery.fn.extend.appendjquery.js:5328 (anonymous function)jquery.js:3486 jQuery.accessjquery.js:5295 jQuery.fn.extend.htmlVM31793:8 (anonymous function)jquery.js:328 jQuery.extend.globalEvaljquery.js:5430 jQuery.fn.extend.domManipjquery.js:5213 jQuery.fn.extend.appendjquery.js:5328 (anonymous function)jquery.js:3486 jQuery.accessjquery.js:5295 jQuery.fn.extend.htmlVM31789:8 (anonymous function)
and so on. It also fails this way in Firefox, with the message "too much recursion."
I'm using Handlebars to iterate through the output from a ColdFusion WSDL that pulls from a SQL Server 2012 database, and I can not change the format of data int he database because too many other things call it. I'm looking up a bunch of addresses, and one is flagged primary, via "PRIMARY_FLAG: 'Y'" Now, even if that's "N," if i understand the Handlebars documentation correctly, that'll still trigger an {{#if}} block in Handlebars. I need to apply particular CSS, (via a span with a class,) if that flag is Y. I also would rather whichever address has that flag display first, but I might be able to finagle that on my own? I also need to know if "ADDRSTATUS_CODE" is "G" or not. (I would've tracked all of this with bit fields in SQL Server, but most of this code was written when I was still in college...)
Is there ANY way I can do something along the lines of "{{#if PRIMARY_FLAG==='Y'}} ?
I ask this here and not on the main handlebars repo because, if this IS possible, it's a documentation question, not a problem with Handlebars itself. (If this is NOT possible, then please say so so I can add it as a feature request on the main repo.)
Hello, I'm trying to use Handlebars.compile for an html string with a javascript object that contains all data. Work beautifully when the properties match up - for e.g. {{userName}} wonderfully gets replaced with the value in the data object.
So, the following line works great for me:
var template = Handlebars(htmlString, dataObject)
output = template(dataObject)
However, say the string passed in has an error - for e.g. instead of {{userName}}, the string has {{user Name}}.
On my server side, the error stops the execution of the entire application - I get a missing helper error, or 'has no method call' error and so on when I try to execute
template(dataObject).
Now, I have been handling this error using the JS's native try/catch approach, but is there anything built into Handlebars for graceful error handling that I can use?
[This is concerning to me because I'm executing compilation on the server side, so any sort of crash is... scary.]
It seems the only book I can find on Handlebars.js is from 2013.. yet it seems there have been a few major version updates since. I am largely unsure of what has changed in the latest few versions compared to the ones used in most books/tutorials that discuss Handlebars.js. I assume quite a lot given the major version bump. Handlebars.js is awesome..but the site is severely lacking in any way of helping those of us starting out. It would be great to have some more tutorials, links to books, other sites, a forum for those of us to chat with one another about how to do things, etc.
As an example, I am working with the RAML (rest API modeling language) community who uses Handlebars.js as the way to generate SDK output code, among other outputs, using Handlebars.js templates. It's all done via nodejs and command line, out of bounds from the normal usage in a web site. So a lot of what I find doesn't directly apply (or maybe it does and I just don't understand how yet). It would be hugely beneficial to have a gitter channel or forum or something for us to chat about things like this to more quickly learn and use handlebars.js.
On this page it says (right near the top):
You can use the if helper to conditionally render a block. If its argument returns
false,undefined,null,""or[](a "falsy" value)...
The term "falsey" (or "falsy") has a well-defined meaning in JavaScript: It's anything that the spec's abtract ToBoolean operation will coerce to false, which is this list: false, undefined, null, "", 0, and NaN. Importantly, [] is not falsey (nor is {}).
If Handlebars doesn't render the template if given [], recommend removing the parenthetical (a "falsey value") from the page entirely.
hi, i think there is a problem on helpers example( link : http://handlebarsjs.com/expressions.html#helpers ) "objecttext" is exists ?
Hi,
Please take a look @ http://handlebarsjs.com/expressions.html
The text "objecttext" should be "text"
The first link on the Handlebars site http://handlebars.strobeapp.com/expressions.html appears to be dead.
handlebarsjs.com in IE11 looks not centered properly
It would help the feedback loop of the docs if there were a link to this issue-tracker in all doc pages generated from the pages in this repo.
Is there any way to validate these codeblocks so that they will pass w3c validation when using a dtd of transitional.
Line 916, column 64: there is no attribute "datetime"
…ss="reviewtimedateago"><time datetime="{{cooldate}}" class="tinyfont cursorhel…
and
Line 913, column 5: character data is not allowed here
{{#each this}}
Line 927, column 5: character data is not allowed here
{{/each}}
If you validate the home page of suttons.co.uk you will see the errors.
Referencing handlebars-lang/handlebars.js#745 (comment)
Here are some specific things to fix:
Do a find and replace of any occurrence of the words "obvious", "simply", "easy" anywhere in the docs. They do a good job of pinpointing areas where further examples and explanations are needed. Literally grep your code base for these words and at a minimum erase them, but I encourage you to flag any paragraph where they occurred and insert a full working example of the concept or idea that was presumed to be "obvious" or "simple" etc.
Include full examples of callback helper functions for passing 1, 2, and 3 arguments. Make sure your callback functions have proper documentation -- it's not clear what kinds of inputs these functions are accepting. Add standard JavaDoc type comments for each of these functions to reinforce how your code works and show what arguments are passed to each of these functions. Literally: add 3 examples, one for a helper function that accepts 1 argument, another demonstrating a helper function that accepts 2 args, etc.
If you're using function names like "noop", you should explain what this is short for. I assume "No Options"? But that's just a guess. Same with "with" -- what does that do and why would we write a function like that? Is it a good representative example of the types of helpers one might need to write? Again, a brief JavaDoc descriptive comment atop each function would do more for your docs than pages in the wiki.
It would be great if Handlebars could load external .hbs files natively, without this snippet:
(function getTemplateAjax(path) {
var source;
var template;
$.ajax({
url: path, //ex. js/templates/mytemplate.handlebars
cache: true,
success: function(data) {
source = data;
template = Handlebars.compile(source);
$('#target').html(template);
}
});
})()
We have some templates with #if conditionals that are not closing correctly. They are being output as an empty set of single curly brackets.
{{#if first_image_small}}
....
{}
Any help in understanding what might be going on here is appeciated. It is happening on all our #if elements, not just this on. Other handlebar tags are working correctly. The wrapping {{#lots}} tag is also working correctly.
Below is the script that is producing the error.
<script id="auction-template" type="text/x-handlebars-template"> {{#lots}}Best,
~Jeff Simpson
It would be good if there was a pragma or documented standard comment format to inform IDE Vendors that a Handlebars template output is destined for a mime type other than text/html. This will clue the IDE into what syntax should be used to parse a given template.
Something like {{!-- mime: text/xml --}} and the vendors can assume text/html is the default if no mime type is specified?
I don't think I'm asking for a code change, I'm just asking for a documentation change on the website and letting the vendors know that's how you're instructing your users?
Here's my associated SO question: http://stackoverflow.com/questions/26911285/using-handlebars-for-templating-other-than-html
Thanks!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.