compiled templates with Handlebars.js (jQuery Mobile environment)
I am struggling somewhat with pre-compilation of templates in Handlebars. My jQuery Mobile project is getting pretty big template-wise and I wish to pre-compile the templates I use.
However I can't seem to find a good explanation (like a step by step tutorial) of how to do this with Handlebars.
I still have my templates all inline using the script tags. I have handlebars installed using NPM. But now I am kinda lost in how to proceed.
I am guessing doing something like
handlebars -s event.handlebars > event.compiled
and somehow including the event.compiled contents? But then, how to call it.
I am calling my templates like so
var source = $('#tmpl_profile').html(),
template = Handlebars.compile(source),
context = user.profile()),
html = template(context);
Hope someone can shed some light on this for me.
So after much trial and error (which is the best way to learn it) here's the way that works for me.
First- externalize all your templates, say you have a template inside script tags like
<script id="tmpl_ownevents" type="text/templates">
{{#unless event}}
<div class="notfoundevents"><p>No events for you</p></div>
{{/unless}}
</script>
Create a new file called events.tmpl and copy/paste the template into that. Be sure to remove the script elements themselves, this gotcha bit me in the a..
Install the Handlebars commandline script like so
npm install -g handlebars
go to the folder you have saved events.tmpl into and run
handlebars events.tmpl -f events.tmpl.js
Include the compiled javascript into your HTML after you included Handlebars.js
<script src="events.tmpl.js"></script>
Now all that is left is change your normal template code into something resembling the following
var template = Handlebars.templates['events.tmpl'], // your template minus the .js
context = events.all(), // your data
html = template(context);
And there you have it, super fast pre-compiled Handlebars templates.
Another great option for this is to use GruntJS. Once installed:
npm install grunt-contrib-handlebars --save-dev
Then inside your gruntfile.js
grunt.initConfig({
dirs: {
handlebars: 'app/handlebars'
},
watch: {
handlebars: {
files: ['<%= handlebars.compile.src %>'],
tasks: ['handlebars:compile']
}
},
handlebars: {
compile: {
src: '<%= dirs.handlebars %>/*.handlebars',
dest: '<%= dirs.handlebars %>/handlebars-templates.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-handlebars');
Then you simply type grunt watch from your console, and grunt will automatically compile all *.handlebars files into your handlebars-templates.js file.
Really rad way to work with handlebars.
Here is the way I do it:
Preparation
We will just assume all your template variables are in a variable called context :
var context = {
name: "Test Person",
...
};
Where to put your templates
Create a directory containing all your templates (we'll call it templates/ ) Add your templates here, called filename.handlebars .
Your directory structure:
.
└── templates
├── another_template.handlebars
└── my_template.handelbars
Compiling your templates
First go to your root directory, then compile your templates with the npm CLI program:
handlebars templates/*.handlebars -f compiled.js
New directory structure:
.
├── compiled.js
└── templates
├── another_template.handlebars
└── my_template.handlebars
Usage
Include the compiled.js in your HTML page after you include the runtime:
<script src="handlebars.runtime.js"></script>
<script src="compiled.js"></script>
Render your templates using the global Handlebars object:
// If you used JavaScript object property conform file names
// Original filename: "my_template.handlebars"
Handlebars.templates.my_template(context)
// if you used special characters which are not allowed in JavaScript properties
// Original filename: "my-template.handlebars"
Handlebars.templates["my-template"](context)
Remarks
Note the file extension .handlebars . It is automatically stripped when compiling the templates.
Extra: if you use one of the Jetbrains IDEs together with the Handlebars/Mustache plugin you even get quite a good editor support.
链接地址: http://www.djcxy.com/p/73450.html上一篇: Emberjs从文件模板化？