Ember.js如何引用Grunt.js预编译的Handlebars模板？

我一直在探索Ember.js，以及Grunt.js，但我不明白Ember.js如何能够find并使用预编译的Handlebars模板。 现在我的Gruntfile.js看起来像这样：

module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), handlebars: { compile: { files: { "js/templates.js": "templates/*.hbs", } } } }); // Load the plugin that handles the handlebars compiling grunt.loadNpmTasks('grunt-contrib-handlebars'); // Default task(s). grunt.registerTask('default', ['handlebars']); }; 

我的app.js Ember视图是这样声明的（路由和控制器被省略）：

 App.LogoView = Ember.View.extend({ templateName: 'logo', classNames: ['logo'] }); App.TabsView = Ember.View.extend({ templateName: 'tabs', classNames: ['tabs'] }); App.TabView = Ember.View.extend({ classNames: ['content'], tabPositions: { tab1: { width: '90px', left: '82px' }, tab2: { width: '180px', left: '172px' }, tab3: { width: '271px', left: '263px' } }, animateTab: function() { var left, tab, width; tab = this.get('templateName'); width = this.get('tabPositions.' + tab + '.width'); left = this.get('tabPositions.' + tab + '.left'); Ember.run.next(function() { $('div.tabs').removeClass('tab1 tab2 tab3'); $('div.tabs').addClass(tab); $('div.slider div.foreground').stop().animate({ 'width': width }, 1000); $('div.slider div.handle').stop().animate({ 'left': left }, 1000); }); }, didInsertElement: function() { this.animateTab(); } }); App.SliderView = Ember.View.extend({ templateName: 'slider', classNames: ['slider'] }); App.Tab1View = App.TabView.extend({ templateName: 'tab1' }); App.Tab2View = App.TabView.extend({ templateName: 'tab2' }); App.Tab3View = App.TabView.extend({ templateName: 'tab3' }); 

这是我的文件结构：

 --/ |--js/ |--app.js |--ember.js |--handlebars.js |--jquery.js |--templates.js |--templates/ |--application.hbs |--logo.hbs |--slider.hbs |--tab1.js |--tab2.js |--tab3.js |--tabs.js |--Gruntfile.js |--index.html |--package.json |--server.js 

所以我在我的index.html文件中使用<script type="text/x-handlebars" data-template-name="slider">语法来引用模板名称，并且工作正常。 我不明白的是，Ember.js应该如何使用预编译模板。

现在，我正在使用Grunt.js来编译它们，并将它们输出到templates.js。 根据Ember文档，当应用程序加载时，它将查找应用程序模板。 这是如何与index.html工作，并通过更改模板的文件名是更改模板的名称？ 有人能指出我正确的方向如何Ember.js使用预编译模板？ 谢谢！

Answer 1

我不明白的是，Ember.js应该如何使用预编译模板。

Ember期望已编译的模板将被添加到Ember.TEMPLATES属性中。 当一个ember应用程序被加载时，它检查任何句柄脚本标记并编译它们。 然后使用指定的data-template-name属性作为键将每个模板添加到Ember.TEMPLATES 。 如果没有提供数据模板名称，则将其键设置为应用程序。

除此之外，余烬并不关心事物如何进入Ember.TEMPLATES 。 您可以手动添加/删除模板。 例如， https://stackoverflow.com/a/10282231/983357演示如何可以内联编译模板：

 Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}'); 

现在显然，你不想这样写你的模板，你想要为你做的咕噜，但你可以看到没有什么魔术正在进行….

根据Ember文档，当应用程序加载时，它将查找应用程序模板。 这是如何与index.html工作，并通过更改模板的文件名是更改模板的名称？

Ember不关心模板的文件名，它只关心在Ember.TEMPLATES['key/goes/here']什么string作为键。 也就是说，使用文件名作为模板的关键字是很有意义的。

有人能指出我正确的方向如何Ember.js使用预编译模板？

我认为你的项目中缺less的东西可能是编译后的模板没有被添加到Ember.TEMPLATES 。 AFAIK grunt-contrib-handlebars插件不会这样做。 考虑使用grunt-ember-templates代替。