How to initialize Foundation in your Ember App

I am new to emberjs can you elaborate what exactly this code does?

By declaring ApplicationView, we are over-riding the default one in order so we can initialize foundation. We put this call inside the didinsertElement hook, which makes sure that whatever template is attached to the view is rendered on the screen before firing it.

ApplicationView is the first View object that is instantiated by Ember, and is directly tied to ApplicationRoute, which is the first Route Object created by Ember. By choosing to attach this call to ApplicationView, we can be sure that foundation will have been initialized before we enter any child routes that also depend on Foundation, but after the app is in the process of rendering and setting up views, which is the proper place for plugins that interface with your templates, like Foundation.

The Bad Practice is doing this

Em.Application.create({
ready: function(){
$(document).foundation()
}
});

which is definitely going to initialize foundation at the wrong time, maybe even before jQuery and Foundation are pulled in, which would probably crash the app if you're not being careful.

The other line is Em.$(document).foundation, which is initializing foundation by calling Ember's reference to jQuery. I like the way it sounds outloud and also makes sure we are calling the jQuery that you attached to Ember. Using $ sign by itself, depending on your build setup, can suffice. But it's really a safer bet to reference Ember's jQuery, which you know for sure is compatible with Ember and also has been instantiated at the right time in the render line.

This code is pretty old though. A more idiomatic way of saying this would be

App.ApplicationView = Em.View.extend({

initFoundation: function(){

return Em.$(document).foundation();

}.on('didInsertElement')

which takes advantage of listening on the ember view lifecycle.

This is quite useful! Thanks.

Can be expressed slightly more concisely too...

App.ApplicationView = Ember.View.extend({
    initFoundation: function () {
        Ember.$(document).foundation();  
    }.on('didInsertElement')
});

I had some problems with that approach. The one that really worked for me is this:

Ember.View.reopen({
        didInsertElement : function(){
        this._super();
        Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },
    afterRenderEvent : function(){
        Ember.$(document).foundation();
    }
});

as explained in http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/

I agree, the afterRender section is prob the best place for this.

This tip is really old, and so is that blog post. You should not be using Em.Run loops in your app normally, check the API: http://emberjs.com/api/classes/Ember.run.html. That's for raw event handlers, not app initializers.

You should not have any problems with .('on') like @mfeckie said, though.