如何将bower组件(getmdl) js包含到成员中？

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 后，对材料设计精馏构件进行了初始化。因此它无法找到任何要初始化的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]);
    });
  }
});