【www.bbyears.com--js教程】
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>
<script type="text/x-handlebars" data-template-name="user">
...
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="user/index">
...
</script>
打开 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>
原文来自:陈三博客