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