ember hbs模板作为单独的文件 [英] ember hbs templates as separate files
问题描述
我想在第一页上运行ember.js（版本1.0.0 Final）示例。
他们将每个句柄模板分成单独的文件与 .hbs 扩展名。
所以我刚刚复制了所有的代码，并创建了同名的文件。当我没有运行他们的时候。我正在尝试路由示例。
我的 index.html ：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Ember Starter Kit< / title>
< link rel =stylesheethref =css / normalize.css>
< link rel =stylesheethref =css / style.css>
< link rel =stylesheethref =css / bootstrap.css>
< link rel =stylesheethref =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 ，但没有帮助。
当您在不同的文件中有模板时，加载它们并编译它们，因为EmberJS不检测文件。没有办法做到这一点。
1）将它们加载到 Ember.TEMPLATES strong>
Ember加载模板并将它们推入到对象Ember.TEMPLATES中。它根据 EmberJS命名约定将小名称键存储模板内容。所以我们自己可以在编译它们后推模板。
例如：如果你有一个名为'post'的模板，加载帖子。 hbs 通过AJAX请求文件，然后设置，
//data是从Ajax返回的HTML内容请求
Ember.TEMPLATES ['post'] = Ember.Handlebars.compile（data）
所以现在你可以直接访问模板
{{partial'post'}}
App.OtherView = Ember.View.extend（{
templateName：'post'
}）;
所以，你可能必须最终通过AJAX请求加载所有HBS文件，并在加载你的应用。这是一个应用程序的大开销。
为了缓解这个问题，我们可以预编译所有模板并将其保存为JS（实际上将它们推送到Ember.TEMPLATES对象），然后加载该JS。这可以使用插件 ember-templates 来实现，这也可以作为咕噜作业grunt-ember-templates 。
2）第二种方法是创建一个视图对象，并将编译后的代码设置为AJAX请求后每个视图的模板。
requirejs的文本插件可以帮助您做到这一点。
如今，Ember人建议不要创建查看对象，除非需要，我建议你按照第一种方式。预编译的是最好的选项，每次创建模板时都可以减少大量工作。
更新：有一些项目构建工具它负责编译句柄模板。 Yeoman 和 Ember-Cli 是你可以看看一次。
I want to run ember.js (version 1.0.0 Final) examples provided on their first page.
They divided each handlebar template in separate file with
.hbsextension.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.
My
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>My templates are inside of the root directory and I copied them to
/templatesbut that didn't help.解决方案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) Load them to
Ember.TEMPLATES: Ember loads the templates and pushes them in to an object Ember.TEMPLATES. it stores the templates content withsmall namekey as per EmberJS Naming conventions. So we ourselves can push the templates after compiling them.Eg: If you have a template with the name 'post', load the
post.hbsfile 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'}}in handlebars or set as
templateNamefor any view classes.App.OtherView = Ember.View.extend({ templateName: 'post' });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.
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) 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
requirejshelps you to do that.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.
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屋！
