如何将bower组件（getmdl）js包含到ember中？

Question

我通过凉亭安装material-design-lite ..

所以我加入了我的应用..

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

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

并导入我的风格..

@import "_color-definitions";

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

@import "material-design-lite";

正确加载样式，但依赖于javascript的组件不像标签和菜单那样工作

我尝试更改标签点击，没有任何反应

Answer 1

你走在正确的轨道上。但是ember.js在初始化材料设计精简版组件之后构建DOM 。所以它找不到任何要初始化的DOM元素。

在查看材料设计精简版的源代码时，我注意到您可以使用函数

componentHandler.upgradeDom();

到（重新）初始化所有组件，

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

到（重新）初始化特定组件。

要将它集成到ember.js中，您可以将组件中的导航和按钮包起来，并通过didInsertElement钩子初始化它们：

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