Is there any way to split an Ember.js app across a few files?

Question

I've just written my app.js file and everything is nicely working but the whole file is currently 450 lines long and will be getting bigger.

Is there any best practice about splitting out state manager code or view code into different files (like states.js or views.js) so that everything is a little bit cleaner?

Also on that note... is there a preferred way to split out handlebars templates out into different files? I've currently just got them all defined in one html file which is starting to get a tiny bit unwieldy too.

Answer 1

I was facing the exactly same question two weeks ago, and I didn't wanted to try AMD with requireJS, which seemed a bit complicated for what I wanted to do (and seemed to have advantages but also disadvantages..)

The simple solution which convinced me is the following :

I have 3 folders in my js folder : "models", "controllers", and "views" which contains my js "classes", and I have an "index.html" that import all the js files (I used HTML5 boilerplate to get a convenient index.html).

To be clear, in my index.html, I have at the end of the file something like :

 <script src="js/app.js"></script>
 <script src="js/models/note.js"></script>
 <script src="js/controllers/notesController.js"></script>
 <script src="js/controllers/selectedNoteController.js"></script>
 <script src="js/views/menuView.js"></script>
 <script src="js/views/noteResumeView.js"></script>
 <script src="js/views/noteView.js"></script>
 <script src="js/views/createNoteView.js"></script>
 <script src="js/views/listeNotesView.js"></script>

Hope this help, (and that I didn't misunderstood your question)

Answer 2

You can use RequireJS to load you ember app (including handlebars templates) from different files.

This answer describes how and also links to a sample app showing how to set things up. I have just tried this approach to one of our websites and it works nicely.