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视图被声明为(路由和控制器被省略):

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

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

Ember希望编译的模板将添加到Ember.TEMPLATES属性中.加载一个ember应用程序时,它会检查任何把手脚本标签并编译它们.然后Ember.TEMPLATES使用指定的data-template-name属性作为键添加每个模板.如果未提供data-template-name,则将其键设置为application.

除了那个余烬之外并不关心事情如何进入Ember.TEMPLATES.您可以手动添加/删除模板.例如,/sf/answers/719756201/演示了如何内联编译模板:

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

现在显然你不想以这种方式编写你的模板,你想要咕噜咕噜地为你做这件事,但正如你所看到的,没有任何魔法可言......

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

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

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

我认为您的项目中缺少的可能是未添加已编译的模板Ember.TEMPLATES.AFAIK grunt-contrib-handlebars插件不会这样做.考虑使用grunt-ember-templates代替.