I'm building a large scale Backbone Marionette app on top of Django utilizing the Django asset pipeline to compile all of the assets.
Right now, I am saving my Handlebars templates as JS strings in the app object like so:
App.Templates.Header = '
<div id="header">
... header stuff ...
</div>
'
class App.Views.Header extends Backbone.Marionette.ItemView
template: App.Templates.Header
I'm not sure that saving templates out into JS strings is really the best way to do things at all. With Rails, you can save out template files and reference them directly in the file structure with JST:
template: JST['apps/base/templates/header']
My understanding is that this is a feature that is baked in to Rails. Is something like this possible with Django? Or, is there another more efficient way that I should be handling my templates?
This features is actually built into Django Pipeline under as JavaScript Templates.
Basically, you define the function to use for processing your templates (Mustache, Handlebars, Prototype or JST) and then the global namespace where those templates are stored and the extension that the compiler uses to determine which files to add to that template object.
Related
I want to build some very similar apps in Django, but I want them to load different tag/filter modules. For this I want the html templates to be generic. For example, I would like to have something like
{% load specific_tags %}
and then I would like to define the variable specific_tags in a context processor for each app. But Django thinks that it should look for "specific_tags" in the installed apps in settings.py. How can I tell Django/Python to first evaluate the content of the variable from the context processor?
Best regards
Why don't you simply put this values in setting files, this is the way how I am differentiating between dev, test, demo and production environments, and the use one of the solution found here to load that value sin your template:
Can I access constants in settings.py from templates in Django?
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 )))
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