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

Question

我一直在探索 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 View 是这样声明的(省略了路由和 Controller ):

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 如何使用预编译模板的正确方向吗？谢谢!

Answer 1

What I don't understand, is how Ember.js is supposed to use the precompiled templates.

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

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

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

现在显然你不想这样写你的模板，你想让 grunt 为你做，但是你可以看到没有什么神奇的事情发生......

According to the Ember docs when an application loads, it will look for the application template. How does that work with index.html and by changing the file name of the template, is that changing the template's name?

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

Could someone point me in the right direction as to how Ember.js uses precompiled templates?

我认为您的项目中缺少的可能是编译后的模板没有被添加到 Ember.TEMPLATES。 AFAIK grunt-contrib-handlebars 插件不这样做。考虑使用 grunt-ember-templates反而。