I'm learning to work with Ember and Grunt precompiled HBS templates, but want to also run in a 'developer mode' where the the App will compile the HBS's at runtime, if it doesn't find them.
I've read about a few ways to go about this and am trying to do it with '$.ajax()' and 'Ember.Handlebars.compile(data)' where each template returned is added to the Ember.TEMPLATES array. This won't work off the file system, so I test it on a localhost tomcat where the Ember App is added to webapps/ROOT.
I'm working with a demo 'user admin' App I found online which uses a couple of components, helpers and 'generated controllers'. So the Templates compile OK, but there are problems with Helper registration, such as:
Handlebars error: Could not find property 'modal-box' on object (generated modal-demo controller).
...so after adding the Component Template to the Templates array, I try to register it by name:
if (templateName == 'components/modal-box') {
Ember.Handlebars.helper('modal-box', function(value, options) {
var escaped = Handlebars.Utils.escapeExpression(value);
return new Handlebars.SafeString(tmpl);
});
}
...but then I get this new error:
registerBoundHelper-generated helpers do not support use with Handlebars blocks.
"Template was precompiled with an older version of Handlebars than the current runtime."
This is all done in an 'App create ready' function which iterates a list of template names, which I'd like to further develop to where it reads the template file names dynamically. The Grunt process also compacts the CSS and concatenates the scripts, so I would want to work out a 'developer mode' process for these too. But right now I'm focused on the HBS Templates & Components.
I'm thinking this must be a FAQ so am wondering if the community has arrived at a best practice for this sort of runtime compile for development?
If not how can I resolve my issue with getting the component template helper generated controllers registered correctly?
They just need to be registered before the other templates are compiled.
Em.TEMPLATES["components/cow-dude"] = Ember.Handlebars.compile("I'm a cow");
App = Ember.Application.create();
http://emberjs.jsbin.com/apIRef/28/edit
Order of operations is important, if it compiles the other templates first, they will just assume cow-dude is a property on the model in context (which will probably be undefined) (http://emberjs.jsbin.com/apIRef/27/edit). That being said, if you are going to lazy load componenets/helpers, those need to be loaded before any of their dependencies (Ember handles this all for you when you just toss them all in at once).
Additionally it sounds like you are using two different versions of Handlebars, which is why it's giving you the Template was precompiled with an older version of Handlebars than the current runtime.
I wrote up a similar response to someone else that might be of use to you: Ember.js with external handlebars template
Related
edited
This question is in addition to previous Handlebars with Backbone template not rendering problem in which browseser was not rendering forms at all now the problem was solved for the form but returns another error which is possibly also with the rendering.
I have an app with Backbone on front-end and Express in back-end with express-handlebars templates and I was trying to change from Underscore templating to Handlebars while still leaving backbone logic behind. So the way I did it - installing handlebars via Bower and then required it.
app.ContactView = Backbone.View.extend({
//....
template: Handlebars.compile( $('#tmpl-contact').html() ),
//....
});
instead of
app.ContactView = Backbone.View.extend({
//....
template: _.template( $('#tmpl-contact').html() ),
//....
});
But it returns errors and I don't really get what causes them.
When I try to load a page, for example:
http://192.168.33.10:3000/contact/
It doesn't shows any errors in the browser. But if I move to:
http://192.168.33.10:3000/about
which doesn't even have Backbone logic behind it returns an error:
You must pass a string or Handlebars AST to Handlebars.compile. You
passed undefined
Which means that template is compiled before the DOM loads on the page. But my Backbone script is loading after html script e. g. after the {{{body}}} element. Also if there is a problem with an order I should get this error on every, not only when moving to another.
So I think the cause is some kind of a conflict between front-end handlebars and express-handlebars on a server. How to solve this, preferably that templates to be rendered via expHbs instance?
If the only change that you made was:
template: Handlebars.compile( $('#tmpl-contact').html() ),
to:
template: _.template( $('#tmpl-contact').html() ),
it wouldn't cause the problems you're describing. As the error message told you "You passed undefined", and undefined wouldn't have worked with the Underscore code either.
It seems more likely that you changed something else, and that change caused the issue you described. However, without more code (ideally a JS Fiddle) it's hard to say what.
Problem solved by loading each Backbone part as a separate file for its route.
I have wrote a highlight helper follow the ember guides.
app/helpers/highlight.js
export default Ember.Handlebars.makeBoundHelper( function(value, options) {
var escaped = Handlebars.Utils.escapeExpression(value);
return new Ember.Handlebars.SafeString('<span class="highlight">' + escaped + '</span>');
});
I invoke the helper in the application template with {{highlight name}} and declare the name in application controller . When visit the index page I got this error
Assertion Failed: A helper named 'highlight' could not be found. Seems the helper is not loaded. Is there any configuration to load the helper ?
I assume that you use ember-cli, as you tagged it this way.
Plain ember and ember-cli are using different resolvers (basiclly mechanisms that search for files in proper directories) and thus have a little bit different name conventions. Helpers in ember-cli must have a dash in their name.
Take notice that if you only put the code you mentioned in your question, this file will have no information what is Ember. You still need to import Ember using modules. Very nice introduction can be found here.
To sum up, change your helper file name to one that includes a dash and the helper will be recognized across the environment.
from the sample/tutorials of knockout, all view/templates are in one page, is it possible to separate them in different files and pre-compile them. just like what ember framework do.
if yes, is there a sample ? better using handlebars or knockout native template engine.
thanks.
The guys from Cassette have found a solution to pre-compile Knockout JS templates: http://getcassette.net/documentation/v1/html-templates/knockoutjs-jquery-tmpl
But Cassette is an asset to build .NET web apps so this solution seems to work only for the .NET world.
There are a few different libraries for this, like
https://github.com/ifandelse/Knockout.js-External-Template-Engine
I have made my own too which uses a Convention approach
https://github.com/AndersMalmgren/Knockout.Bootstrap
Install-Package Knockout.Bootstrap
It needs a service to get the templates, once that is done you load templates like
this.bootstrap.loadView(model, this.view);
By convention if the model is sent in is named EditOrderViewModel it will load the View named EditOrderView
wiki
https://github.com/AndersMalmgren/Knockout.Bootstrap/wiki
I'm trying to use guard-handlebars to precompile my handlebars templates (to avoid having them all in my index.html, which feels slightly sub-optimal...). The precompilation works well, and Ember accepts the fact that the template accept when I inject it into Ember.TEMPLATES like this:
Ember.TEMPLATES['application'] = Handlebars.templates['application']
However, it doesn't work. I get an exception like this:
Could not find property 'outlet'
...in the Handlebars helperMissing method. It seems like Ember uses some monkey-patching of the default Handlebars stuff, supposedly adding support for the {{outlet}} helper and others. But my template does not seem to use these outlets. How do you work around this?
I'm using the handlebars compiler installed via NPM to compile the templates.
Found a duplicate question with a suggested solution/workaround: How can I consume handlebars command-line generated templates with Ember?
(short summary: yes, precompiling with the handlebars command line program does not work straight away, exactly because of the reason I am suggesting in the original question)
The plugin for you.
(Here's a sample integration: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences/blob/master/Gruntfile.js)
The guard-handlebars gem is pretty out of date, it was not designed to work with ember.
Today there are a few options.
barber with rake-pipeline
grunt-ember-templates
For example, to compile an ember template with barber try something like this:
compiled_template = Barber::Ember::FilePrecompiler.call(IO.read(file))
# now ruby variable compiled_template is a string like: "Ember.Handlebars.template(function(...));"
result = "Ember.TEMPLATES['#{name}'] = '#{compiled_template}';"
# now result is a JS string that sets Ember.TEMPLATES[name] to precompiled handlebars
When a new version of ember comes out it can take a few days to make it's way thru the ecosystem. When that happens you might find the ember-source gem helpful. See Alex's blog post for more detail:
http://alexmatchneer.com/blog/2013/02/27/gemifying-ember-dot-js-slash-handlebars-dot-js-slash-etc-dot-js/
How I can do to get the template Handlebars from file, like this:
App.ApplicationView = Ember.View.extend({templateName: 'templates/myTemplate1.handlebars'});
not from script:
< script type="text/x-handlebars" data-template-name="myTemplate1">
Update
I Will implement Ember-Brunch handlebars template pre-compiling
If you intend on assembling your finished application you can use something like rake-pipeline. This, of course, implies that you also need to use rake-pipeline during development.
If you do not want to assemble your templates, you can call Ember.TEMPLATES['templateName'] = Ember.Handlebars.compile('template content goes here') in your app. You can then separate these templates out to different files, which you will include in your index.html file.
Other than that I do not think there are other options. You could fetch your templates via an AJAX call and feed them into Ember.Handlebars.compile, but then you risk your templates being available too late in the application's lifecycle. Another option is to generate this on-the-fly on the server that delivers your Ember app, but you then most likely have to build-your-own solution.
Refer to the following for an application that uses the Ember.TEMPLATES[''] option: https://github.com/joachimhs/haagen-software.no/tree/master/app/
It is a little cumbersome, but you do get used to it...
There really isn't that many great options for this sort of functionality, and its not a whole lot Ember.js can do about it I'm afraid. .
I believe requirejs + require-handlebars-plugin does exactly what you need. You will have to convert your js application to use requirejs though, but that shouldn't be hard.
More info about requirejs: http://requirejs.org/
require-handlebars-plugin: https://github.com/SlexAxton/require-handlebars-plugin