Reputation: 1848
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?
Upvotes: 29
Views: 12204
Reputation: 31
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.
Upvotes: 3
Reputation: 2173
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...
Upvotes: 17
Reputation: 1838
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:
Upvotes: 3
Reputation: 5517
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),
});
}
});
Upvotes: 7
Reputation: 4969
I'm not sure I'm understanding your question, but if you're asking what I think you're asking, then you'd give your .handlebars document a data-template-name
in the script
tag: <script ... data-template-name="index">...</script>
Upvotes: 0
Reputation: 1277
My solution of this is use server side compile language like Jade (as I'm using ember with nodejs) with Includes feature. You can write each handlebar template as separate files and include them during compilation. Related Jade document: https://github.com/visionmedia/jade#a13
Or you can use Require.js to include other js files, there's a related question.
Upvotes: 0