How to include bower component (getmdl) js into ember?

Question

I install material-design-lite via bower ..

So I include into my app ..

var app = new EmberApp(defaults, {
    sassOptions: {
      includePaths: ['bower_components/material-design-lite/src']
    }
  });

  app.import('bower_components/material-design-lite/material.js');

And import into my style ..

@import "_color-definitions";

$color-primary: $palette-blue-500;
$color-accent: $palette-orange-400;

@import "material-design-lite";

The style is loaded correctly, but components that rely on javascript do not work as is the case of tabs and menus

I try to change tab clicking and nothing happens

Answer 1

You're on the right track. But ember.js builds the DOM after the material design lite component has been initialized. So it cannot find any DOM elements to initialize.

While looking at the source code of material design lite, I noticed that you can use the function

componentHandler.upgradeDom();

to (re-)initialize all components, and

componentHandler.upgradeElement(yourElement);
// or
componentHandler.upgradeElements(yourElementList);

to (re-)initialize specific components.

To integrate this into ember.js you could wrap up your navigation and buttons in components and initialize them via the didInsertElement hook:

// file: components/my-navigation/component.js
/* global componentHandler */
export default Ember.Component.extend({
  didInsertElement() {
    Ember.run.scheduleOnce('afterRender', this, function() {
      componentHandler.upgradeElement(this.$()[0]);
    });
  }
});