javascript – 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使用预编译模板的方向正确吗？谢谢！

解决方法

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

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}}');

现在显然你不想以这种方式写你的模板,你想咕噜为你做,但是你可以看到没有任何魔法.

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]中使用什么字符串作为关键字.也就是说,使用filename作为模板的关键是非常有意义的.

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.