使用带有Handlebars.js的预编译模板（jQuery Mobile环境） [英] Using pre-compiled templates with Handlebars.js (jQuery Mobile environment)

问题描述

我在Handlebars中预编译模板时感到有点挣扎。我的jQuery Mobile项目变得非常模板化，我希望预编译我使用的模板。

然而，我似乎无法找到一个好的解释（像一步一步的教程）如何使用Handlebars做到这一点。

我仍然使用脚本标记全部内联我的模板。我有使用NPM安装的把手。但是现在我有点不知所措了。

我正在做类似于

  handlebars -s事件。车把> event.compiled 
  

以某种方式包括event.compiled内容？然后，如何调用它。

我打电话给我的模板就像这样

  var source = $（'＃tmpl_profile'）。html（），
 template = Handlebars.compile（source），
 context = user.profile（）），
 html = template（context）; 
  

希望有人能为我阐明这一点。

首先将所有模板外部化，假设您在脚本标记内有一个模板，如

 < script id = tmpl_owneventstype =text / templates> 
 {{#unit event}} 
< div class =notfoundevents>< p>没有您的事件< / p>< / div> 
 {{/ unless}} 
< / script> 
  

创建一个名为events.tmpl的新文件并将模板复制/粘贴到该文件中。
一定要删除脚本元素本身，这个问题在我一点点..

像这样安装Handlebars命令行脚本

  npm install -g handlebars 
  

转到已保存events.tmpl的文件夹并运行

  handlebars events.tmpl -f events.tmpl.js 
  

包含Handlebars.js后，将编译后的JavaScript包含到您的HTML中

 < script src =events.tmpl.js>< / script> 
  

现在剩下的就是将您的普通模板代码改为类似以下的代码：

  var template = Handlebars.templates ['events.tmpl']，//您的模板减去.js 
 context = events.all （），//你的数据
 html = template（context）; 
  

在那里，您可以使用超快速预编译的Handlebars模板。

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.

这篇关于使用带有Handlebars.js的预编译模板（jQuery Mobile环境）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！