How do I initialize Foundation JavaScript plugin in EmberCLI application using Ember.js 2.0?

[swatijadhav]

I am working on ember application using ember-cli.

ember version is "2.0.0-beta.2"

I am integrating the foundation 5 in application, installed bower package for foundation and also included it in ember-cli-build.js file

app.import('bower_components/foundation/js/foundation/foundation.js');
app.import('bower_components/foundation/js/foundation/foundation.offcanvas.js');

Now i want to initialize the foundation as

Ember.$(document).foundation({
  offcanvas: { close_on_click: true }
});

But in ember-2 they have removed views completely, where should i initialize it?

Any thoughts?

Thanks.

[taras]

Views are being replaced in favour of components. Anything that you'd do with views you can do in a component as well.

export default Ember.Component.extend({
  didInsertElement() {
    this.$().foundation({
      offcanvas: { close_on_click: true }
    });
  }
});

Edit: Forgot the hook :)

[swatijadhav]

Thanks.. I want to place it at application level.. the layout will have left sidebar (left canvas menu), which will be open on large screen and collapse on small screen, so its part of application layout.

So do i need to create separate template for above component? or can I directly use it in my application layout? Thanks :)

[taras]

You can create an application component and put it into the application template. I would do something like this:

application.hbs

{{#app-canvas}}
  <h2>Welcome to Ember.js</h2>
  {{outlet}}
{{/app-canvas}}

components/app-canvas.js

export default Ember.Component.extend({
  didInsertElement() {
    this.$().foundation({
      offcanvas: { close_on_click: true }
    });
  }
});

Edit: updated with the correction

[swatijadhav]

Great Solution!! I will try this out and let you know.. Thanks :+1:

[swatijadhav]

After adding above component, giving error as file changed components/app-canvas.js

browse/components/app-canvas.js: Unexpected token (2:6)
SyntaxError: browse/components/app-canvas.js: Unexpected token (2:6)
  1 | export default Ember.Component.extend({
> 2 |   this.$().foundation({
    |       ^
  3 |     offcanvas: { close_on_click: true }
  4 |   });
  5 | });

so added changes as

import Ember from "ember";
export default Ember.Component.extend({
  didInitAttrs() {
    Ember.run.schedule("afterRender", function() {
      Ember.$(document).foundation({
        offcanvas: { close_on_click: true }
      });
    });
  },
});

Its working now!! Let me know if you have any suggestion @taras

[taras]

Yes, Yes. I made a mistake in that code example.

[swatijadhav]

No problem at all!! Once again thanks for the instant help :smile: We can close this issue now.

[taras]

It's my pleasure. Tell you friends :)

[stefanpenner]

> import Ember from "ember";
> export default Ember.Component.extend({
>   didInitAttrs() {
>     Ember.run.schedule("afterRender", function() {
>       Ember.$(document).foundation({
>         offcanvas: { close_on_click: true }
>       });
>     });
>   },
> });

this isn't correct, @taras intermediate example is though:

> export default Ember.Component.extend({
>   didInsertElement() {
>     this.$().foundation({
>       offcanvas: { close_on_click: true }
>     });
>   }
> });

[taras]

@swatijadhav as @stefanpenner pointed out, you should use didInsertElement rather than didInitAttrs with afterRender

[swatijadhav]

Thank you @stefanpenner for correcting us. @taras, yeah I have updated code. :+1:

[aalasolutions-zz]

I have used https://github.com/artificialio/ember-cli-foundation-sass in my ember, i created a component and in the component I used what is suggested here that didnt worked.

I found 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]

Please, create another issue with your question. thank you