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.
Related
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
I have a dynamically created Ember's views which are connected from some sub-parts stored in the DB. I'm also using a Jsoup for modifying the template to include some other non-Ember parts. Unfortunately when my stored ember part contains attribute binding in common way:
<li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
The Jsoup tries to "fix" them by adding empty quotes like, which is of course expected behavior:
<li {{bindattr="" class="isCompleted:completed isEditing:editing" }}="">
Is there any way for binding the attributes ie. by wrapping it within some valid HTML
ie. like data-ember='{{bindAttr "something"}}' or at least a way for preventing Jsoup from these changes?
The problem here is (as you surely already know) that Jsoup tries to parse your HTML markup with the included handlebars expressions, and by doing so it check's for valid HTML, so in the case of bindAttr this is interpreted as a attribute for your <li> tag, and because a valid attribute is something like class="foo" Jsoup converts it to bindAttr="".
Lamentably there is no built-in way of telling Jsoup to ignore tags with no values. I guess you should try another tool that fit's your needs.
Hope it helps.
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.
I have a page template in Tridion 2011 with Razor code that prints information based on RenderComponentPresentation() as the first thing in the page. No other markup comes before it, because the component, not the page, contains the initial markup. Unless I put at least one character before the first RenderComponentPresentation in the published output, the template refuses to render any presentations.
So, for example, if this is all that is in the layout TBB this works (in my real code the tcms are real of course):
<
#RenderComponentPresentation("tcm:mytcm","tcm:myothertcm")
but this does not
#RenderComponentPresentation("tcm:mytcm","tcm:myothertcm")
The first prints the contents of the component preceded by the "<", whereas the second does nothing at all. I don't want to have ANY markup directly at the start of the page template, I want the first thing to be the component. Is it possible?
I've just done a quick test in Template Builder using the latest version of the Razor Mediator (1.2) and couldn't replicate your issue.
Maybe you could try:
<text></text>
#RenderComponentPresentation("tcm:mytcm","tcm"myothertcm")
It won't render any additional markup but may trick the mediator into doing what you want (though like I said, I can't replicate your problem so can't verify whether it does).
Normally with Razor you iterate over any and all Component Presentations on the page, and right now I'm working with
#foreach(var cp in ComponentPresentations){
#cp.RenderComponentPresentation()
}
This will render every component on the page, regardless of predefined schema's or templates. Your issue however suggest a problem elsewhere. What kind of output does your page template generate (do mind its the page template using a compound template which in turn includes the Razor TBB you describe here). Is it .aspx, HTML or other? And what is the Component templates' output? is it an HTML fragment, or anything else?
As far as you syntax goes, that should be just fine other than the template invocation:
#RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx")
I have a feeling this code only works when used within HTML tags, though, but that's just a hunch.
Bit of a hack but have you tried:
<text>#RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx")</text>
or
#Html.Raw(RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx"))
Disclaimer: not really used Razor mediator. Just Razor.