Emberjs Handlebars预编译

Question

我的Emberjs应用程序运行缓慢所以我想预编译我的模板以简化运行时.然而,我迷失了如何继续前进.我阅读了http://handlebarsjs.com/precompilation.html和Emberjs的介绍但是没有,我所能做的只是按照网站上的指示创建模板文件,我无法弄清楚该模板文件的内容和方法Emberjs.

如何在Emberjs中预编译模板？我应该怎样处理模板文件才能在Emberjs中使用它？

Answer 1

为了澄清,托马斯的写作示例仍然是在运行时进行模板编译.我认为他的观点是,在您加载预编译的Ember-Handlebars模板后,您可以执行以下操作:

MyApp.MyView = Ember.View.extend({
  template: Ember.TEMPLATES.mytemplate,
})

使用Handlebars的内置预编译器的问题在于Ember的Handlebars实现在Handlebars本身提供的功能之上添加了一些功能,因此您需要安装ember-precompile包,它提供与handlebars命令行基本相同的接口实用程序,但使用Ember的Handlebars实现.

这将避免您必须将所有templateNames 更改为templates并且必须Ember.TEMPLATES...在每个视图中添加,因为它会自动更新Ember的内置模板缓存.

因此,假设您已经将预先编译的templates.js文件作为输出加载ember-precompile templates/*.handlebars -f templates/templates.js,这里是一个更完整的工作导入/初始化顺序示例片段:

<script src="/lib/handlebars-1.0.0.beta.6.js"></script>
<script src="/lib/ember-1.0.pre.js"></script>
<script src="/lib/ember-data-latest.js"></script>
<script>
  var App = Ember.Application.create();
</script>
<script src="/templates/templates.js"></script>
<script src="/js/models.js"></script>
<script src="/js/views.js"></script>
<script src="/js/controllers.js"></script>
<script src="/js/router.js"></script>
<script>
  App.initialize();
</script>

Answer 2

您还可以使用Grunt.js和手柄模板编译器.我使用了"grunt-ember-templates"插件,效果很好.

http://gruntjs.com/

https://npmjs.org/package/grunt-ember-templates

Answer 3

您可以将预编译的把手输出设置为 ember 视图上的模板属性（而不是 templateName）。这也是 ember 在底层所做的事情

MyApp.MyView = Ember.View.extend({
  templateName: "myViewWhatever",
  template: Ember.Handlebars.compile('<p>{{blah}}</p>'),
})