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.
Related
Ive installed the prettier-plugin-tailwindcss in my emberjs app. It runs and sorts the classes in my css files correctly but it doesnt touch the handlebars files. The standard prettier stuff still works in the handlebar files.
Ive tried adding a twConfig to the .prettierrc as suggested in the docs but that was unrecognised.
I'd really like to use this plugin but I need to support the handlebars files. Please let me know if anyone has any ideas on how I could solve this.
Here's my current prettierrc.yaml
# We use pretty much all defaults from Prettier https://prettier.io/docs/en/options.html
# We prefer single quotes to align with our internal RECONZ styleguide
singleQuote: true
twConfig: 'app/tailwind/config.js' // adding this throws this error below
// [warn] Ignored unknown option { twConfig: "app/tailwind/config.js" }.
overrides:
- files: '*.hbs'
options:
parser: 'glimmer'
# The Ember community uses single quotes in JS & double in templates
singleQuote: false
These are the versions I have installed:
"prettier": "^2.6.0",
"prettier-plugin-tailwindcss": "^0.1.11",
yarn: v1.22.17
UPDATE: the issue seems to be the parser which is set to glimmer When I tried with html instead the plugin worked but unfortunately I need to keep the parser as glimmer because html also causes some unwanted effects. Is there another option I could use?
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 using EmberJS with HandleBars and using the Yeoman setup, (but I updated dependencies to the latest).
I have a relatively large application.hbs, and I want to separate it into different files like top-bars.hbs and main-content.hbs and so on, then I want to include them in the application.hbs. but I do not have any views for them, just some separation of the big file, I do not want to make ajax requests for those templates, just want to separate and then include them.
How can I do this in emberJS?
I think what you maybe looking for is a partial. What you would do is make a partial file in the directory you want most likely somewhere with all the other templates. The resolver complains about either leading underscores or dashes in Yeoman so if one blows up try the other this is mostly for a visual indication when looking through your files which ones are partials. So make _top-bars.hbs and put the code you want in there. and the in the application.hbs just do `{{partial "top-bars"}} and it will put the template into the application template without changing the scope.
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.
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