使用Handlebars.js编译模板（jQuery Mobile环境）

我在Handlebars中预编译模板时遇到了一些困难。 我的jQuery Mobile项目在模板方面越来越大，我希望预编译我使用的模板。

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

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

我正在做类似的事情

handlebars -s event.handlebars > event.compiled

并以某种方式包括event.compiled内容？ 但是，那么怎么称呼它。

我打电话像我这样的模板

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

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

---

所以经过多次试验和错误（这是学习它的最佳方式），这里是适合我的方式。

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

<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模板。

---

另一个很好的选择是使用GruntJS。 一旦安装：

npm install grunt-contrib-handlebars --save-dev

然后在你的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');

然后，只需从控制台输入grunt watch ，grunt就会自动将所有* .handlebars文件编译到handlebars-templates.js文件中。

真正rad方式与车把一起工作。

---

这是我做的方式：

制备

我们假设所有的模板变量都在一个名为context的变量context ：

var context = {
    name: "Test Person",
    ...
};

放置模板的位置

创建一个包含所有模板的目录（我们将其称为templates/ ）在这里添加您的模板，名为filename.handlebars 。

您的目录结构：

.
└── templates
    ├── another_template.handlebars
    └── my_template.handelbars

编译你的模板

首先进入你的根目录，然后用npm CLI程序编译你的模板：

handlebars templates/*.handlebars -f compiled.js

新的目录结构：

.
├── compiled.js
└── templates
    ├── another_template.handlebars
    └── my_template.handlebars

用法

在包含运行时后，将compiled.js包含在HTML页面中：

<script src="handlebars.runtime.js"></script>
<script src="compiled.js"></script>

使用全局Handlebars对象呈现您的模板：

// 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)

备注

请注意文件扩展名.handlebars 。 编译模板时会自动剥离。

额外：如果您将Jetbrains IDE与Handlebars / Mustache插件一起使用，您甚至可以获得相当不错的编辑器支持。

链接地址: http://www.djcxy.com/p/73449.html

上一篇: compiled templates with Handlebars.js (jQuery Mobile environment)

下一篇: Adsense with AJAX