emberjs and foundation4

Question

i am trying to use emberjs and foundation 4 which is now using the zepto framework, though as soon as i added the emberjs includes into my application.js the foundation code stops working. is there something wrong with the order of the includes?

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require events
//= require foundation
//= require rails.validations
//= require rails
//= require gmaps4rails/gmaps4rails.base
//= require gmaps4rails/gmaps4rails.googlemaps

//= require handlebars
//= require ember
//= require ember-data
//= require teammngt

//= require_self
TeamMngt = Ember.Application.create();
$(document).foundation();

Answer 1

TL;DR

TeamMngt = Ember.Application.create({
  ready: function() {
    Ember.run.next(this, function(){ 
      $(document).foundation(); 
    });
  }
});

OR

Add after you create the application:

TeamMngt.ApplicationView = Ember.View.extend({
  didInsertElement: function() {    
    Ember.run.next(this, function(){ 
      $(document).foundation(); 
    })
  }
});

Note: Change TeamMngt to whatever you set = Ember.Application.create();

---

Some Explanation:

After your application template gets loaded, didInsertElement event gets fired. But placing $(document).foundation() there alone won't work (I'm guessing the way things are loaded/bound or whatever). So I did:

didInsertElement: function() {
  setTimeout(function() {
    $(document).foundation();
  }, 0);
}

Having a setTimeout() with 0ms seemed weird, so I figured there is a better way. Thus, leading to putting $(document).foundation() inside Ember.run.next().

---

Credits: Zaxnyd
Reference: Ember.js Ember.View didRender event