9

我一直在探索 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 如何使用预编译模板的正确方向吗？谢谢！

4

1 回答 1

16

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

Ember 期望编译后的模板将添加到 Ember.TEMPLATES 属性中。当加载 ember 应用程序时，它会检查任何把手脚本标签并编译它们。然后将每个模板添加到Ember.TEMPLATES使用指定的 data-template-name 属性作为键。如果没有提供数据模板名称，则它们的键设置为应用程序。

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

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

现在显然你不想这样写你的模板，你想让 grunt 为你做，但是你可以看到没有什么神奇的事情发生......

根据 Ember 文档，当应用程序加载时，它会寻找应用程序模板。这如何与 index.html 一起使用，并且通过更改模板的文件名，是否更改了模板的名称？

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

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

我认为您的项目中缺少的可能是编译后的模板没有被添加到Ember.TEMPLATES. AFAIKgrunt-contrib-handlebars插件不这样做。考虑改用grunt-ember-templates。

于 2013-03-25T03:56:04.143 回答