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
Related
I'm working on a Vue app that (obviously ;)) loads Vue templates, lets the user fill in content and then export the markup of those templates/components. However, all linebreaks and indentation are lost in the process.
Is there any way to make Vue keep that information? So far at least I achieved to keep (conditional) comments via the
comments: true
option. There are several other options like expectHTML or shouldDecodeNewlines, but they don't seem to be documented and none of them seem to help me accomplish what I want.
The problem is that we're in part handling email templates (meh...) and it's a client requirement that "input === output" (well, markup-wise), because indeed a space or linebreak here or there can indeed make a difference in fussy mail clients. So simply running the markup through a beautifier is not an option.
I know, I know... That's not really what Vue is made for, and markup !== DOM... But the tool itself is written in Vue and I love to currently be able to use all the magic of Vue syntax inside the templates being processed as well.
If all else fails, I might have to resort to using mustache (or any other template system - recommendations welcome) - but I would really like to keep the templating as it is right now, for the aforementioned reasons.
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
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 write an app in javascript with the ember.js library which relies heavily on the Handlebars templating system. However, I'm using FLASK which also uses the jinja templating system.
Is it possible to use both template renderers at the same time? Or do I need to use one over another. Anyone with experience using both flask and ember.js know which one would potentially be easier to replace with the other?(Maybe handlebars is much easier to replace Jinja with or vice versa).
Note that these two template engines are in different places. Jinja2 will run on the server side, Handlebars will run on the client side. You could potentially use both without interference if you needed to.
But with that said, there is really no need to use server-side templates if you have a rich client framework like ember.js. In your situation the Flask server will likely have routes that serve data via ajax requests back to the ember.js client, so the client is really the best place for template rendering to happen.
You can mark sections of code as {% raw %} to tell jinja2 to ignore it. Wrap your handlebars.js template in raw tags like so:
{% raw %}
<script id="foo-template" type="text/x-handlebars-template">
<p>{{foo}} - {{bar}}</p>
</script>
{% endraw %}
As #Miguel said, you don't really need Jinja2 if your using ember.js, I figured out if you don't want to render those templates, simply return flask.send_file('your html file here') instead returning flask.render_template('your html file here'). See the docs for more details.
While I fundamentally agree with both #Miguel and #Ali, several companies I have worked with mix the RESTful model for APIs with server-generated HTML. [NOTE: This shouldn't be the case when using Ember, but I'm working with Flask / Jinja2 and Backbone in my current client's code base.]
I actually found a solution using Pybars, based on some reading from Khan Academy's style guide:
#app.template_filter("handlebars")
def handlebars_filter(context, filepath):
source = open( filepath, "r").read().decode('utf-8')
template = pybars.Compiler().compile( source )
return Markup( u"".join( template( context )))
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/