$().foundation() loads too early. about ember-cli-foundation-6-sass HOT 10 CLOSED

Solved it putting this code in my controller:

init: function () {
    this._super();
    Ember.run.schedule("afterRender",this,function() {
        $(document).foundation();
    });
},

from ember-cli-foundation-6-sass.

+1

from ember-cli-foundation-6-sass.

Or, e.g. I created wrapper component for content area like this:

// app/components/application-area.js

import Ember from 'ember';
export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    this.$().foundation();
  }
});

and app/templates/components/application-area.hbs contains just {{yield}}

from ember-cli-foundation-6-sass.

@GCheung55 @williamweckl Is this just a 2.5.x issue? have you updated to anything more recent?

from ember-cli-foundation-6-sass.

I ended up creating a wrapper component like @SlyDen's example. I don't think it was an issue with ember-cli v2.5.

I think this can be closed.

from ember-cli-foundation-6-sass.

@williamweckl

Solved it putting this code in my controller:

Where is the controller located?

from ember-cli-foundation-6-sass.

@Jumokee I think @williamweckl was referring to a controller that corresponded to the template that had needed the Foundation JS.

So you could create an application controller, or any of your routes can have a controller with the code.

from ember-cli-foundation-6-sass.

Thanks @williamweckl, I'm trying this in top-level application controller, and getting no luck. Ember does schedule it for afterRender, but it still seems to get called before those elements are in the DOM. Manually calling it in the console works just fine. Thoughts? Not sure why the Ember run loop isn't as intuitive as it seems... isn't afterRender a global event (as in, waits for everything to load, even children).

from ember-cli-foundation-6-sass.

Similar to @SlyDen, I just dropped a component initialize-foundation into the top-level application template, with the following hook inside the component:

  didRender: () => {
    $(document).foundation();
  }

This seems to work, until you render anything afterwards. You may have to do as @SlyDen does, but always wrap relevant foundation markup inside the component yield.

from ember-cli-foundation-6-sass.

As @allthesignals mentioned it won't work if you "add new HTML to the DOM" ... I faced with it recently.
I don't use addon nowadays, just raw Foundation 6.4.1. And I use only one or two Foundation's JS plugins - so I just call something like this in e.g. didInsertElement hook of my component:

Ember.run.schedule("afterRender", this, function() {
      this.$().foundation();
    });

Of course, it can be better solution than "afterRender" but it works without warnings ...

from ember-cli-foundation-6-sass.