Any good resources that discuss Ember's DOM/window initialization/time?

1

I’ve been having some issues with getting some of Foundation’s features to work properly with Ember. Specifically the responsive top bar dropdown menu and Foundation’s Orbit slider.

But it seems like all the issues stemmed from when Foundation was being initialized. For example, I had to add

Ew = Ember.Application.create({
  ready: function () {
    setTimeout(function() {
      $(document).foundation();
    });
  }
});

to get the slider to initialize at all. Without the setTimeout function the images of the slider just stacked on top of one another like the it wasn’t recognizing the js file.

Thoughts?

2

Not that familiar with the internals of Foundation’s javascript. But a couple general thoughts

1.) Perhaps consider using the Ember run loop for timing related stuff instead of set timeout. Seems a little more idiomatic for Ember.

My understanding is that Ember Run Loop is using backburner.js underneath the hood so to speak. https://github.com/ebryn/backburner.js

http://talks.erikbryn.com/backburner.js-and-the-ember-run-loop/

I think the primary advantage is you can get a little more debugging control here.

2.) There is the ready hook but also the activate hook which is run when you enter a route the first time. Depending on what you are trying to accomplish this distinction might be meaningful.

Some info on lifecycle hooks.

http://madhatted.com/2013/6/8/lifecycle-hooks-in-ember-js-views

If you get something working consider posting a JSBin. It can be helpful for others to see and potentially collaborate and troubleshoot.

2 Likes