9

私はGrunt.jsと一緒にEmber.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

そのため、index.htmlファイルの構文を使用して<script type="text/x-handlebars" data-template-name="slider">、名前でテンプレートを参照していますが、これは正常に機能します。私が理解していないのは、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属性をキーとして使用して、各テンプレートが追加されます。data-template-nameが指定されていない場合、キーはアプリケーションに設定されます。

それ以外の残り火は、物事がどのように入るのかを気にしませんEmber.TEMPLATES。テンプレートを手動で追加/削除できます。たとえば、https：//stackoverflow.com/a/10282231/983357は、テンプレートをインラインでコンパイルする方法を示しています。

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

明らかに、この方法でテンプレートを作成するのではなく、うなり声で作成してもらいたいのですが、ご覧のとおり、魔法は何も起こっていません。

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 に答える