Emberjs and foundation4

Question

I am trying to use emberjs and foundation 4, which now use the zepto framework, although as soon as I added that emberjs includes application.js in my application, the base code stops working. Is there something wrong with the order of inclusion?

//= 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 creating the application:

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

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

---

Some Explanation:

After your application template loads, the didInsertElement event will didInsertElement . But posting $(document).foundation() there just won't work (I assume things are loaded / connected or something else). So I did:

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

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

---

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