I have templates that are mustache files that need to be converted to handlebars.
From doing research it looks like handlebars supports a lot but not all of the mustache functionality. Are there any tools that will allow me to automate this conversion?
Mustache:https://mustache.github.io/
Handlebars: https://handlebarsjs.com/
Here are some differences between mustache and handlebars:
What are the differences between Mustache.js and Handlebars.js?
I am using these specific implementations of those templates:
mustache: (Java) artifactId=jmustache https://github.com/samskivert/jmustache
handlebars: (Java) artifactId=handlebars https://github.com/jknack/handlebars.java
One can automate converting mustache templates to handlebars templates with this python mustache_to_handlebars tool:
https://github.com/spacether/mustache_to_handlebars
One key differences is:
#someTag in mustache covers these 3 use cases in handlebars: #if or #each or #with
And you can call it like:
mustache_to_handlebars path_containing_mustache_files
Related
I never heard it before. Does "templating languages like HTMLBars" related to Ember.js?
I will try to explain it.
There is the templating engine and language called handlebars. The language is a superset of (X)HTML, so can use all HTML and some specific things in curly brackets that will be replaced by the handlebars templating engine. This works full on string replacement. So you compile your handlebars template with the handlebars compiler and get a Javascript function that will take an Javascript Object and produce an HTML string by replacing the handlebarsparts.
HTMLBars on the other side is a full HTML parser. Its based on the handlebars templating language, but is actually capable of understanding your HTML code. As far as I know it does not completely support HTML/SGML so the HTMLBars language is a subset of the handlebars language.
Because of its knowledge of the HTMLPart HTMLBars is capable of directly building a DOM rather then an HTML String. This is faster then injecting the string into the browsers rendering engine, and allows more features. For example since HTMLBars ember templates are able to updates attributes like <img src={{myUrl}} />. This wasn't able before, because handlebars didn't know if a placeholder is in a Tag or not. So until HTMLBars you was required to do `.
HTMLBars is also the base of the current ember templating engine called Glimmer.
I'm looking with interest at VueJS. I've seen the documentation about defining resources per component, but I would rather have template files separate from js files in my development environment.
I'm using Webpack so I'm thinking it should be possible to compile these separate resources together for use at run time.
Has anyone had any success in configuring Webpack to do this? I've tried using the text-loader to require html templates from inside my js files, but then the scoped css was ignored.
It would be nice to have the option of separating the css too. The docs seem to favour Browserify for this kind of approach.
You can use the src attribute to split the component into multiple files.
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
Documentation
I am trying to display a handlebars code sample in my Ember App. The sample would look like
{{#bm-select}}
{{#bm-selected}}
{{name}}
{{/bm-selected}}
{{/bm-selected}}
How could I add this to my template and make handlebars not process it? I just want to display the code like above.
I tried stuff like \{{bm-select}}.
Using raw block helpers but I don't think Ember's Handlebars support this.
Curly braces can be escaped in handlebars template using a backslash \ .
example,
emberjs.jsbin.com/valogusulo/1/edit?html,js,output
\{{#bm-select}}<br/>
\{{#bm-selected}}<br/>
\{{name}}<br/>
\{{/bm-selected}}<br/>
\{{/bm-selected}}
I have a fairly big webapp with lot of templates. I am looking to save time by precompilation of these files.
Currently, I use a script wrapper so that I can load it dynamically and package them in html
<script id="all-domain-users-model-template" type="text/html">
<td></td>
<td>{{domain}}</td>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{is_account_owner}}</td>
<td>{{#if is_account_owner}}Delete{{/if}}</td>
</script>
There are many many such files. One file can have more than one definition..
I am looking for ideas for a script to read the name in id, parse html, compile and put it back using id.templates in a js file.
I have seen Using pre-compiled templates with Handlebars.js (jQuery Mobile environment) - the accepted answers mentions that the script tag was removed before copying.. But in reality, its almost impossible..
I use grunt-ember-templates to precommpile my ember handlebars templates.
For a good example of this grunt plugin in use check out this example todos application.
It gives a good example of using grunt for your build process, testing, etc, and includes template precompilation.
I'm using precompiled templates for several reasons:
Performance (no need to re-compile at runtime)
Code separation (cleaner than embedding <script> tags and hardcoding in JS)
Content security policy (this is for an extension).
Basically, I'm generating templates.js via the handlebars command line utility, based on several template.handlebars files. Next I try to bring these templates into Ember with the following loop:
for (var name in Handlebars.templates) {
var template = Handlebars.templates[name];
Ember.TEMPLATES[name] = template;
}
The result is weird: text seems to be loaded, but many template features (eg. {{outlet}}) don't work. I suspect that this is because Handlebars and Ember-Handlebars are not the same thing.
I guess there are two options (and questions):
Precompile Ember-friendly templates (how can I do this via a command line?)
Properly import Handlebars templates into Ember (how?)
UPDATE: As per the answer, Ember.Handlebars is not the same as Handlebars, so the precompilation is different. Wrote a simple script to precompile for Ember: https://gist.github.com/3723927
Yes, the plain Handlebars compiler compiles to different JavaScript than Ember.Handlebars, so you cannot consume its output with Ember.
I don't know of a way to run Ember.Handlebars through the command line, though it should be possible in principle to write something.
To find out how to precompile with Ember.Handlebars, take a look at the source code of ember-rails - it supports precompilation.