javascript - 使用带有 Handlebars.js 的预编译模板(jQuery Mobile 环境)

Question

我在 Handlebars 中对模板的预编译有些挣扎。我的 jQuery Mobile 项目在模板方面变得相当大，我希望预编译我使用的模板。

但是我似乎找不到关于如何使用 Handlebars 执行此操作的良好解释(如分步教程)。

我仍然使用脚本标签内联我的模板。我使用 NPM 安装了 Handlebars 。但是现在我有点迷失了如何进行。

我猜是在做类似的事情

handlebars -s event.handlebars > event.compiled

并以某种方式包含 event.compiled 内容？但是，如何调用它。

我这样调用我的模板

var source = $('#tmpl_profile').html(),
template = Handlebars.compile(source),
context = user.profile()),
html    = template(context);

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

Answer 1

经过多次试验和错误(这是学习它的最佳方式)，这是适合我的方式。

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

<script id="tmpl_ownevents" type="text/templates">
    {{#unless event}}
        <div class="notfoundevents"><p>No events for you</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'], // your template minus the .js
    context = events.all(), // your data
    html    = template(context);

这就是超快的预编译 Handlebars 模板。