Emberjs : Loading all template at once

Question

So i have been wondering that if i write all my templates into a single file, will Ember load all these templates at once when the application is loaded?

Say, i have this in index.html

<! -- Added all dependecies of Ember -->
<script type="text/x-handlebars" >
This is application template
</script>

<script type="text/x-handlebars" id="about">
This is about template
</script>

And my application.js

App = Ember.Application.create();

App.Router.map(function(){
this.resouce('about');
});

So lets say i visits index.html so is the about template is already loaded at this time? ,i mean what i naturally assume is that it GET the index.html page and extracts handlebar templates from it so all the templates defined in index.html should be loaded when the application boots up. Is this right? , will diving different templates into different files will rectify this?

Answer 1

Yes all your templates will be available at boot time with the above mentioned way.

If you want to just separate the templates for development. Just separate the templates into different 'hbs' files and use a grunt precompiler task which will compile all the templates to a single js file which you can include in your index.html. Most ember apps just precompile and concatenate all the templates and js files.

If your thinking on lazy loading the template files, you may need to implement that mechanism yourself. Matthew Beale explains on lazy loading stuff in ember .

For application structure and organization, you should really look into ember-cli .