So here’s where I’d like to go with Ember.js: I want an app that has two main templates: one for user login which is served up initially, and one to house the rest of the app after logging in. After logging in, I want a main navigation pane that controls/changes out content in another pane (eventually based on user permissions, but I’ll start with just having it work).
How should I structure my app? Here’s what Ember.js provides out of the box in their starter kit:
So, do all of my models, views, and controllers for the entire app go into app.’s? If so, how do I structure those components inside the file so that they are easy to navigate? How should I keep them organized, by components, or by keeping all models together, views together, etc? If not, how do I load the separate components? Should I have folders for models, views, and controllers? If that’s the case, how do I load them? Do I have a giant list of <script src=* elements in my index.html page?
As I’m planning out my components, I’m assuming that something like this would be what I need to do:
If I’m understanding this right, I would have an appController that would launch when the application first begins. It would have a loggedIn property. I would set an observer on that property such that if it were false, I would do a view.append() a login template to the Site Handlebars Template. Otherwise, I would view.remove() the login template, and view.append() the main page template. The main page view would contain a Navigation view that would never change, but itself controls what shows up in the Content View. It would load whatever template is associated with the Component Button that is active, and each template would have its own models, views, and controllers for the functionality associated with it. (how do I load in the extra templates and their associated models, views, and controllers?)
Is that anywhere near a correct big picture view? How on earth do I structure the files and code associated with that? I’m sure state charts play some sort of a role here, but I have no idea how to plan them out and implement them. I’m encouraged that they appear to be built into ember.js now, according to the website, because there’s so much new material to learn here I’d rather focus on what’s available out of the box rather than how to do my task with a half dozen different frameworks or components.
In addition to structuring the app know I still have to learn the process of writing a RESTful back end, another huge learning task in itself, but I’m okay for the time being just using fixture data. Heck, even if I used more traditional methods for developing the components I’d be okay; I’d just really like the responsiveness of an interface like the above that’s super fast.