Ember.js: Where is the start button?

Question

I'm used to thinking about starting a one-page application, for example: 1. Load some data into critical models, 2. Create an instance of the main controller and 3. Name the render () method to disable it.

How is this achieved with Amber? Following the examples (lean, sighs) in the documentation, it seems that some things start on their own when the page loads - the templates are compiled, the views appear like magic when the page loads. I feel that I am missing something fundamental. Is there an online example of a more complex application, say something with tabs or dynamically loaded views?

Light bulb, go away, it’s not.

Answer 1

When expanding an Ember Application object, you can provide a ready-made function that will be called when the application starts. You must definitely call this._super (), otherwise it will break your application. Check out the sample sproucore 2.0 application (ember is the new name for sproutcore 2.0).

The way ember works is that it sets up a run loop that responds to events. Whenever an event occurs, the start loop basically calls the necessary handlers and starts any bindings that need to be updated. Since everything usually happens in a run loop, you often don't really write any code to update. Instead, you record the bindings that are triggered when necessary.

Answer 2

I started a blog series about getting up and working with Ember on Rails. Here is part 1:

http://www.cerebris.com/blog/2012/01/24/beginning-ember-js-on-rails-part-1/

I hope you find this useful even if you do not plan to use Ember with Rails. Most of the interesting details are client-side and therefore server independent. Posts still cover creating an Ember.Application object, dynamically loading data through the REST interface, and then providing the Ember view on the page in descriptors. I hope this is enough to get you started.

Answer 3

Another thing I did was use Em.StateManager for bootstrap.

 App.Loader = Em.StateManager.create({ start: Em.State.create({ enter: function(mgmt, ctx) { // this code will execute right away, automatically } }) }); 

Since you use create instead of continuing, the object will be instantly created. If you define a state called start , it will be recognized as the default initial state (or you can specify another by name). Thus, the new StateManager object immediately enters the initial state, and when the StateManager enters the new state, it will always look for a way to enter this state and start it, if any.

The state manager is a natural place to initialize your application, because the object provides ways for you to follow the micro-level execution order during the async boot process, without confusing yourself in too many callbacks.