I just starting learning Ember and it looks great. However, I have a silly question: how do I break down the index html so that it does not become a total mess as the number of templates grows. All the examples I see put all the templates in the index.html file which is fine for small sample apps but not for bigger apps.
Thanks!
I believe biggers apps use some kind of build tool like Grunt to organize templates (not only templates but concatenate all your controllers, models, routes etc). Build tools automatically grab all the files in a directory and concatenate them together appropriately. Check out the semi-official version of this, Ember App-Kit.
Online examples don’t want to make any assumptions about where all your templates are, so they go with the default which is right in index.html. But realistically, a project might store its templates at (for example) app/templates/components/FooComponent.hbs. Again, to see an example check out the EAK.
To expand on that a bit, the build tools do what’s called precompiling. There’s a standalone tool that will do it for you called ember-precompile. What this does is take a .hbs file and output a compiled version in a .js file. So rather than including the template in your page in a script tag, you simply precompile it, then include the script in your page like any other Javascript file.
If you’re at all familiar with Grunt, I think that using the precompile plugin is probably the easiest way to get started.
Great! thanks for the quick reply! I will be sure to check Grunt and the Ember App-Kit.
I thought I was missing something obvious, I feel better now 