Using separate template files in Ember.js

Question

MVC frameworks always allow views to be stored as separate files and retrieved. How is this supposed to be accomplished in Ember.js? I've been looking for hours, so if you want to vote this down as some sort of duplicate, please at least link to a question or resource that provides a definitive, straightforward answer.

For instance, Ember automatically creates an index controller, and automatically renders the index template if you indicate an {{outlet}} as long as the url is /, so I shouldn't need any code other than window.App = Ember.Application.create(); in my app.js for this functionality. How do I create a separate file such as index.handlebars and have Ember find and render it?

Answer 1

In order to preload my templates, I used the following code in my application. It uses jQuery to add the templates to the file and then starts the application. The code could use some tweaking but it's working for me...

var loaderObj = {      templates : [     '_personMenu.html',     'application.html',     'index.html',     'people.html',     'person.html',     'people/index.html',     'friend.html' ] };  loadTemplates(loaderObj.templates); //This function loads all templates into the view function loadTemplates(templates) {     $(templates).each(function() {         var tempObj = $('<script>');         tempObj.attr('type', 'text/x-handlebars');         var dataTemplateName = this.substring(0, this.indexOf('.'));         tempObj.attr('data-template-name', dataTemplateName);         $.ajax({             async: false,             type: 'GET',             url: 'js/views/' + this,             success: function(resp) {                 tempObj.html(resp);                 $('body').append(tempObj);                             }         });     });  }  var App = Ember.Application.create(); //Rest of the code here... 

Answer 2

You can use JQuery.ajax to load text file and then Ember.Handlebars.compile to create a template from it:

$.ajax({
   url: 'http://example.com/path/to/your/file',
   dataType: 'text',
   success: function (resp) {
       MyApp.MyView = Ember.View.extend({
           template: Ember.Handlebars.compile(resp),
       });
   }
});

Answer 3

It is definitely the norm to split your JS into multiple files, and then use a build process to stitch them together. Have a look at this answer to another SO Question which includes links for two different techniques to lay your application out based on your choice of server side technology:

EmberJS: Good separation of concerns for Models, Stores, Controllers, Views in a rather complex application?

Answer 4

A bit late but I'll add this here for anyone that finds their way here.

Handlebar Template Precompiling is probably your looking for. While normally you end up adding <script type="text/x-handlebars"> tags into the main app file you can also use Handlebars to transpose them into Javascript strings and then store them in Ember.TEMPLATES.

This has a couple of advantages as code is cleaner etc but also you'll be able to use the runtime version of Handlebars which will result in a smaller required runtime library and significant savings from not having to compile the template in the browser.

check out http://handlebarsjs.com/precompilation.html & http://www.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/#what_is_handlebars_template_precompiling for more information.