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.

score 12 · Answer 1 · answered May 03 '12 at 09:19

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)

score 4 · Answer 2 · edited May 23 '17 at 12:25

4

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.

edited May 23 '17 at 12:25

Community

1
1

answered May 01 '12 at 12:31

Asbjørn

1,212
1
11
15

1

I thing this was still a little bit complicated compared to what I would have liked to see, I don't like adding learning curves to my code unnecessarily. I Guess that this is the best that I can hope for given that EmberJS doesn't have anything like this built in – real_ate May 02 '12 at 08:43
Hopefully you won't find that you are wasting your time learning RequireJS. It also gives you [lots of other stuff](http://requirejs.org/docs/why.html). – Asbjørn May 02 '12 at 10:06

pangratz · Answer 3 · 2012-05-02T09:02:14.460

2

I use ember-skeleton for my projects.

To get started simply do the following:

git clone https://github.com/interline/ember-skeleton.git my-app
cd my-app

bundle install
bundle exec rackup

And then go to http://localhost:9292

Also take a look at the wiki for further build tools and templates.

edited May 02 '12 at 09:02

answered May 01 '12 at 10:53

pangratz

15,875
7
50
75

Most of these tools seem to be related to Rails... I didn't know that ember was such a Rails technology :/ I'm really looking for something simple, the first step in my code layout journey, so I'll probably not be going with any of these suggestions. Also the in the documentation for the nodejs one it says: Is it production-ready? Not really. Gor.js is still mostly work-in-progress. – real_ate May 02 '12 at 08:35
ember-skeleton does not "depend" on rails. It lets you split your code and later combine them via `require()` syntax. You can also define your templates in `.handlebars` files. – pangratz May 02 '12 at 08:59
I am unclear how to use these .handlebars files for cleaning up the templating part. How to get them loaded into the project? – nembleton Oct 28 '12 at 09:19
The handlebars files are "compiled" in https://github.com/interline/ember-skeleton/blob/master/Assetfile#L89-99 and can either be included via `require('appname/~templates/templateName')` or by a simple `templateName: 'appname/~templates/templateName'` in the view (this extension is implemented in https://github.com/interline/ember-skeleton/blob/master/app/lib/ext.js) – pangratz Oct 28 '12 at 10:14

score 2 · Accepted Answer · answered Feb 07 '15 at 14:12

2

The standard way to do this is now to use ember-cli. Find more information at http://www.ember-cli.com/

answered Feb 07 '15 at 14:12

real_ate

10,861
3
27
48

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

4 Answers4

Linked