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

我一直在探索 Ember.js 以及 Grunt.js，但我无法理解 Ember.js 如何找到并使用预编译的 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

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

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

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

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

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

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

现在显然你不想以这种方式编写模板，你希望 grunt 为你做这件事，但正如你所看到的，没有什么神奇的事情发生......

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

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

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

我认为您的项目中缺少的可能是编译的模板没有被添加到Ember.TEMPLATES。据我所知grunt-contrib-handlebars插件不执行此操作。考虑使用grunt-ember-模板 https://github.com/dgeb/grunt-ember-templates反而。