Ember.js如何引用Grunt.js預編譯的Handlebars模板？

Question

我一直在探索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灰燼意見聲明，像這樣（路線和控制器被排除在外）：

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如何使用預編譯模板？謝謝！

Answer 1

我不明白的是，Ember.js應該如何使用預編譯模板。

Ember希望編譯後的模板將被添加到Ember.TEMPLATES屬性中。當加載一個ember應用程序時，它會檢查任何handlebars腳本標記並編譯它們。然後使用指定的data-template-name屬性作爲關鍵字將每個模板添加到Ember.TEMPLATES。如果沒有提供數據模板名稱，則將其鍵設置爲應用程序。

除此之外，餘燼並不在乎事物如何進入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。 AFAIK grunt-contrib-handlebars插件不會這樣做。考慮改用grunt-ember-templates。