ember hbs 模板作为单独的文件 [英] ember hbs templates as separate files
问题描述
我想运行他们第一页上提供的 ember.js(版本 1.0.0 Final)示例.
I want to run ember.js (version 1.0.0 Final) examples provided on their first page.
他们将每个车把模板分成带有 .hbs 扩展名的单独文件.
They divided each handlebar template in separate file with .hbs extension.
所以我只是复制了所有代码并创建了具有相同名称的文件.当我运行它们时，什么也没有发生.我正在尝试路由示例.
So I just copied all of the code and created files with same names. When I run them nothing hapens. I am trying ROUTING example.
我的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>
<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember-1.0.0.js"></script>
<script src="js/libs/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
</html>
我的模板在根目录中，我将它们复制到 /templates 但这没有帮助.
My templates are inside of the root directory and I copied them to /templates but that didn't help.
推荐答案
当你在不同的文件中有模板时，你必须加载它们并编译它们，因为 EmberJS 不检测文件.有几种方法可以做到这一点.
When you have templates in different files, you have to load them and compile them as EmberJS doesn't detect files. There are few ways to do that.
1) 将它们加载到 Ember.TEMPLATES:Ember 加载模板并将它们推送到对象 Ember.TEMPLATES.它按照 EmberJS 命名约定存储带有 small name 键的模板内容.这样我们自己编译好模板就可以推送了.
1) Load them to Ember.TEMPLATES:
Ember loads the templates and pushes them in to an object Ember.TEMPLATES. it stores the templates content with small name key as per EmberJS Naming conventions. So we ourselves can push the templates after compiling them.
例如:如果您有一个名为post"的模板，请通过 AJAX 请求加载 post.hbs 文件，然后设置，
Eg: If you have a template with the name 'post', load the post.hbs file through AJAX request then set,
// "data" is html content returned from Ajax request
Ember.TEMPLATES['post'] = Ember.Handlebars.compile(data)
所以现在你可以直接访问模板
So now you can access the template directly as
{{partial 'post'}}
在把手中或设置为任何视图类的templateName.
in handlebars or set as templateName for any view classes.
App.OtherView = Ember.View.extend({
templateName: 'post'
});
因此，您可能最终必须通过 AJAX 请求加载所有 HBS 文件并在加载应用程序之前编译它们.这对于应用程序来说是一个很大的开销.
So, you may have to end up loading all HBS files through AJAX request and compile them before loading your application. This is a big overhead for an application.
为了缓解这种情况，我们可以预编译所有模板并将它们保存为 JS(实际上是将它们推送到 Ember.TEMPLATES 对象中)，然后加载该 JS.这可以使用插件 ember-templates 来实现，该插件也可用作 grunt 工作 grunt-ember-templates.
In order to ease this, we can pre-compile all templates and save them as JS(which actually pushes them in to the Ember.TEMPLATES object) and just load that JS. This can be achieved using a plug-in ember-templates which is also available as a grunt job grunt-ember-templates.
2) 第二种方式是创建一个视图对象，并在AJAX请求后将编译后的代码设置到每个视图的模板中.requirejs 的文本插件可以帮助您做到这一点.
2) The second way is create a view object and set the compiled code to the template of each view after the AJAX request. The text plug-in of requirejs helps you to do that.
由于现在 Ember 人建议除非需要，否则不要创建视图对象，我建议您遵循第一种方式.预编译是最好的选择，它可以减少您每次创建模板时的大量工作.
As nowadays Ember people suggest not to create a view object unless required, I suggest you follow the first way. The precompiled one is the best option which reduces a lot of work every time you create a template.
更新:有一些项目构建工具负责编译车把模板.Yeoman 和 Ember-Cli 是你可以看一次的.
UPDATE : There are some project building tools which takes care of compiling handlebars templates. Yeoman and Ember-Cli are the ones you can have a look once.
这篇关于ember hbs 模板作为单独的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
