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

我一直在探索Ember.js,以及Grunt.js,但是我不明白Ember.js如何能够找到并使用预编译的Handlebars模板.现在我的Gruntfile.js看起来像这样： @H_57_2@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.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personNamE}}');