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

Question

所以我将其添加到我的应用程序中..

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 在 material design lite 组件初始化之后。所以它找不到任何要初始化的 DOM 元素。

在查看 material design lite 的源代码时，我注意到您可以使用函数

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]);
    });
  }
});

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

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

ember.js

bower

ember-cli

material-design-lite