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}}
Related
According to Ruby on Rails Guides (http://guides.rubyonrails.org/i18n.html#using-safe-html-translations) all I need to do to render my translations without calling html_safe on them is to have the key name end with _html. This is what I tried:
en:
breadcrumbs:
root_html: "<i class='material-icons'>home</i>"
Calling it like this:
I18n.t('breadcrumbs.root_html')
causes the output to be this very string defined inside my translations, but not the rendered HTML.
What am I doing wrong?
Using Ruby on Rails 4.2.1.
Thanks in advance!
Scrolling down a little further in the guide I found the problem:
Automatic conversion to HTML safe translate text is only available from the translate view helper method.
Since I tried to prepare the link inside my controller and pass it through a gem to the view, this didn't work.
To make this work you'll have to call html_safe on the string, like so:
I18n.t('breadcrumbs.root_html').html_safe
If you find another solution, hit me up!
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 would like to abstract out pieces of html in an ember project.
For example... keep the <head> in a different file and "include" it in index.hbs or something. (think php <?php include('something'); ?>)
The naming conventions in ember CLI and handlebars are a little foreign so far - and I'm not finding what I thought would be pretty standard...
My guess would have been `{{#include 'head.hbs'}}' or something
There has got to be a convention for this... But I think I'm using the wrong search terms.
Thanks.
You can use either {{render 'your-template-file'}} or {{partial 'your-partial-file'}} to accomplish this.
So I'm building an Ember.js application. I've got more than two routers now, so it's becoming a lot harder to justify putting all these templates in index.html as <script> handlebars.
I can't seem to figure out how to have handlebar templates outside of the html! The other thing is that I'd like to avoid more dependencies if possible. So no pipeline, grunt libraries, or similar.
So to clarify:
I already stuff templates in index.html via <script> tags, I don't like it.
I don't want to jump back 20 years and put HTML in strings inside my javascript.
AJAXing static views seems ridiculous.
Without adding anything to the stack I don't see how you could do it other then putting them in index.html or in code one way or the other.
With adding stuff to your stack you should probably read this: answer by Yehuda Katz himself.
You could compile your templates in code like so:
App.View = Em.View.create({
template: Em.Handlebars.compile('{{outlet}}');
});
or if you are extending the view:
App.View = Em.View.extend({
defaultTemplate: Em.Handlebars.compile('{{outlet}}');
});
or you could register them like so
App.register('template', 'ViewName', Ember.Handlebars.compile(template));
The best way I've found so far is to use a command line tool like Grunt. You set the paths where your templates are (so you can organize your handlebars files nicely), and grunt will automatically compile all the views into a single, minified JS file that you can include, whenever you create or modify a template.
Because your templates are already compiled you can ship your application with a much smaller version of handlebars.
You can see an example of a configured Grunt file for that here : https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
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.