Ember with Foundation Componenets

[aalasolutions-zz]

Using Ember-CLI 1.13.1. I have used https://github.com/artificialio/ember-cli-foundation-sass in my ember. I have followed the tutorial and SCSS is working out of the box.

I created a component and in the component I used this code from another github page

initFoundation: Ember.on('didInsertElement', function () {
  Ember.run.next(() => {
    Ember.$(document).foundation();
  });
})

It also didnt seemed to work. I am getting Uncaught TypeError: Ember.default.$(...).foundation is not a function Error on page load

[taras]

Did you tell ember-cli-foundation-sass to include the Foundation JavaScript library? Checkout the options section of the readme. You need to have at least the following code in your Brocfile.js or ember-cli-build.js.

var app = new EmberApp({
  'ember-cli-foundation-sass': {
    'foundationJs': true
  }
});

I wouldn't recommend the code that you specified in your code example. Can you give me a link to the page where you got that code?

[aalasolutions-zz]

I tried the one with ember-cli-foundation-sass that didnt worked, so I used it from https://github.com/joshforisha/ember-foundation/blob/master/addon/components/f-component.js

Regarding the brock file I have

var app = new EmberApp({
  'ember-cli-foundation-sass': {
    'modernizr': true,
    'fastclick': true,
    'foundationJs': 'all'
  }
});

[aalasolutions-zz]

Hmm For some reason foundationJs: 'all' is not working, i have to manually app.import all the the js in the ember-cli-build.js file. So app.import in brocfile.js is also not working

Now it is not giving my any error. But when I click on the item to reveal it, it simply dont work. when I execute the JS from the console on the ember all $('#myDiv').foundation('reveal', 'open'); it does show the Reveal box,

Note: When I made any changes to ember-cli-build.js I have to restart the ember s ember server

[aalasolutions-zz]

ahh it worked,

While you said that my code is not correct, I had changed it to

initFoundation: Ember.on('didInsertElement', function () {
  Ember.run.next(() => {
    Ember.$().foundation();
  });
})

So when I added document back it worked... at last... thanks a lot