$().foundation() loads too early.

[GCheung55]

On ember-cli 2.5.1. $().foundation() is triggered by the initializer but it's not doing anything.

I have a component template that has the example responsive header from Foundation 6 Site docs:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

The only way I've made it work was to go into web console and type $(document).foundation();

I've tried creating my own initializers/zf-widget.js with $(document).foundation(); and, while that line of code is executed, the menu isn't working correctly. Nothing is hidden and the dropdowns are still expanded.

My ember-cli-build.js looks like:

var app = new EmberApp(defaults, {
        // Add options here
        'ember-cli-foundation-6-sass': {
            'foundationJs': 'all'
        }
});

[williamweckl]

+1

[williamweckl]

Solved it putting this code in my controller:

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

[SlyDen]

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}}

[donaldwasserman]

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

[GCheung55]

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.

[joemcbroom]

@williamweckl

Solved it putting this code in my controller:

Where is the controller located?

[GCheung55]

@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.

[allthesignals]

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).

[allthesignals]

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.

[SlyDen]

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 ...