Ember.js 里，如果把模板直接写在 index.html 文件中，是这样写的：
| 代码如下 | 复制代码 |
|
<script type="text/x-handlebars" data-template-name="application"> // 最顶级的模板 ... {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> <script type="text/x-handlebars" data-template-name="user"> <script type="text/x-handlebars" data-template-name="user/index"> |
|
打开 index.html 网页时，Handlebars.js 会即时编译1模板内容。如果要提高应用速度，则可以把模板文件分离出去，然后预编译。
我们建一个 templates 目录，专门放置 handlebars 模板。以上面的代码说，模板从主页面分离如下：
| 代码如下 | 复制代码 |
| application.hbs index.hbs user.hbs user/index.hbs |
|
注意，第四个 index.hbs 是放在 user 子目录下的，另外，.hbs 文件中不需要 <script>...</script> 这样的标签，只需把 script 标签对之间的内容拷入 .hbs 文件。
预编译的工作可以交给 grunt ember templates ，相应的 Gruntfile.js 配置部分如下：
| 代码如下 | 复制代码 |
|
emberTemplates: { compile: { options: { templateBasePath: 'app/templates/' }, files: { 'app/scripts/templates.js': 'app/templates/**/*.hbs' // 将 tempaltes 目录下所有的 hbs 文件一同编译到 scripts/templates.js 文件中 } } }, watch: { emberTemplates: { files: 'app/templates/**/*.hbs', tasks: ['emberTemplates'] } } |
|
命令行下运行 grunt emberTemplates 就可以预编译，之后在 index.html 文件中引用 templates.js 文件：
| 代码如下 | 复制代码 |
|
<script type="text/javascript" src="scripts/templates.js"></script> |
|
原文来自:陈三博客
时间： 2025-01-29 16:25:27