HEY! I'm working on an awesome course on Golang and Ember.js skills that's live soon. Get early access to it here:

nerdyworm

Ember.js Initializers

Ember initializers in a nutshell:

  • Set up application state
  • Run tasks before App.ready
  • Pre load data

Basic Initializers

initializers/basic_initializer.js
1
2
3
4
5
6
App.initializer({
  name: "debug",
  initialize: function() {
    Ember.debug("Debug initializer");
  }
});

This first example shows the bar minimum it takes to set one up. The initialize function will be called when Ember is booting your application.

initializers/ready.js
1
2
3
4
5
6
7
8
9
10
11
var called = false;
App.initializer({
  name: "debug",
  initialize: function() {
    called = true;
  }
});

App.ready = function() {
  Ember.debug(called); //prints true
}

This example shows that the initalizer will run before the application’s ready function is called. This guarantees that the application will be in a known state before the App.ready function is called.

Ordering

initializers/ordered.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
App.initializer({
  name: "second",
  after: "first",
  initialize: function() {
    Ember.debug("second called!");
  }
});

App.initializer({
  name: "pre",
  before: "first",
  initialize: function() {
    Ember.debug("pre called!");
  }
});

App.initializer({
  name: "first",
  initialize: function() {
    Ember.debug("first called!");
  }
});

// output
// DEBUG: pre called!
// DEBUG: first called!
// DEBUG: second called!

This example makes use of the before and after options. By default there is no guaranteed order of execution. The before and after properties take the name of the dependent initializer. Ember will resolve the dependencies between initializers and execute them in order.

Async Initializer

initializers/preload.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
App.initializer({
  name: "preload",
  initialize: function() {
    App.deferReadiness();
    Ember.$.getJSON("/preload.json", function(json) {
      App.handlePreloadData(json);
      App.advanceReadiness();
    });
  }
});

App.ready = function() {
  Ember.debug(App.hasPreloadedData()); // prints true;
}

It is a very common use case that you would want to perform and async task in an initializer. Ember allows us to use deferReadiness and advanceReadiness. These two functions will cause the application to wait until all deferReadiness calls have been matched by an advanceReadiness call. Once the last advanceReadiness function is invoked then application will resume booting and then the App.ready function will be called.

Loading data into the store

initializers/load_widgets.js
1
2
3
4
5
6
7
8
9
10
11
12
Ember.Application.initializer({
  name: "loadWidgets",
  after: "store",
  initialize: function(container) {
    App.deferReadiness();
    Ember.$.getJSON("/widgets.json", function(json) {
      var store = container.lookup('store:main');
      store.load(App.Widgets, json);
      App.advanceReadiness();
    });
  }
});

Another common use case is pre loading some data into the store. Here we simply make an ajax request to the server, grab some data and load some widgets. Using this technique will ensure that the data is available to the application before it fully initializes.

Thanks!

Thanks for reading through this short guide. Hopefully I have saved you a few moments or shown you a new feature of Ember.

Comments