如何Ember.js参考Grunt.js预编译的手把模板？(How does Ember.js re

我一直在探索Ember.js，与Grunt.js一起，但我不明白Ember.js如何能够找到并使用预编译的把手模板。 现在我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灰烬意见声明，像这样（路线和控制器被排除在外）：

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。 据灰烬文档加载应用程序时，它会寻找应用程序模板。 如何与index.html，然后通过更改模板的文件名的工作，就是更改模板的名字？ 可能有人点我在正确的方向，以Ember.js如何使用预编译的模板？ 谢谢！

Answer 1:

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

Ember公司预计，编译模板将被添加到Ember.TEMPLATES财产。 当灰烬应用程序加载它会检查任何车把脚本标记并编译它们。 然后，将每个模板被添加到Ember.TEMPLATES使用指定的数据模板-name属性作为密钥。 如果没有数据模板的名称，只要它们键设置为应用程序。

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

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

现在很明显你不想写你的模板这种方式，你想咕噜这样做对你，但你可以看到没有什么神奇的事....

据灰烬文档加载应用程序时，它会寻找应用程序模板。 如何与index.html，然后通过更改模板的文件名的工作，就是更改模板的名字？

Ember公司并不关心模板的文件名，它只是在乎字符串作为重点Ember.TEMPLATES['key/goes/here'] 这就是说，它使一个很大的意义使用文件名作为你的模板的关键。

可能有人点我在正确的方向，以Ember.js如何使用预编译的模板？

我认为什么从您的项目缺失可能是已编译的模板不被添加到Ember.TEMPLATES 。 据我所知的grunt-contrib-handlebars插件并没有这样做。 考虑使用咕噜-烬模板代替。

文章来源: How does Ember.js reference Grunt.js precompiled Handlebars templates?