成员JS:如何导入材料组件Web

Question

我试图在EmberJS应用程序中使用(MDC)。我安装了material-components-web和亚恩。

yarn add material-components-web --dev

本安装材料-组件-web@0.41.0。

我使用了sass/CSS，但不知道如何包含/导入JS。有人能告诉我如何将其导入到组件js文件和/或组件模板文件中吗？

我做no file error时会得到一个

app.import('node_modules/material-components-web/dist/material-components-web.js')

谢谢你的帮助！

Answer 1

这就是我通常在我的Ember项目中使用材料组件网络的方式。从Ember版本2.x到最新的3.x，一直为我工作。

第一个在烬-cli-build.js。导入所需的js文件

  app.import('node_modules/material-components-web/dist/material-components-web.js', {
    using: [{
      transformation: 'fastbootShim'
    }]
  });

只有在使用Fastboot (应该使用Fastboot )以排除在Fastboot环境中执行文件的情况下，才适用使用部分。

然后不要害怕，在didInsertElement钩子上的Ember组件中，激活MDC组件--例如，对于我使用过这样的代码的模态抽屉组件。

  tagName: 'aside',
  classNames: ['mdc-drawer', 'mdc-drawer--modal', 'app-drawer'],

  didInsertElement: function () {
    let component = this;

    let componentJqueryObject = component.$();
    let componentElement = componentJqueryObject[0];

    let MDCDrawer = mdc.drawer.MDCDrawer;
    let drawer = new MDCDrawer(componentElement);

    $('header').on('click', '.drawer-menu', function() {
      drawer.open = !drawer.open;
    });

    $('body').on('click', 'main', function() {
      drawer.open = false;
    });

    $('aside').on('click', 'a', function() {
      drawer.open = false;
    });
..........

对于MDC顶部-app-bar组件(仅限于最新的MDC )，我使用了以下方法

  tagName: 'header',
  classNames: ['mdc-top-app-bar', 'mdc-top-app-bar--fixed'],

  didInsertElement: function () {
    let component = this;

    let componentJqueryObject = component.$();
    let componentElement = componentJqueryObject[0];

    let topAppBar = new mdc.topAppBar.MDCTopAppBar(componentElement);
    let mainEl = document.getElementById('app-main');
    topAppBar.setScrollTarget(mainEl);

.

注意:出于两个原因，始终使用didInsertHook是很重要的。1.)根据Ember，didInsert是在保证将组件的HTML插入DOM的位置上的。2.)根据快速引导文档，didInsert不是在节点上运行的Fastboot模式下执行的，但是MDC是一个浏览器。

享受吧！

编辑:基于以下问题

import Component from '@ember/component';
import { get } from '@ember/object';
import $ from 'jquery';

export default Component.extend({
  tagName: 'aside',
  classNames: ['mdc-drawer', 'mdc-drawer--modal', 'app-drawer'],

  didInsertElement: function () {
    let component = this;

    let componentJqueryObject = component.$();
    let componentElement = componentJqueryObject[0];

    let MDCDrawer = mdc.drawer.MDCDrawer;
    let drawer = new MDCDrawer(componentElement);

    $('header').on('click', '.drawer-menu', function() {
      drawer.open = !drawer.open;
    });

    $('body').on('click', 'main', function() {
      drawer.open = false;
    });

    $('aside').on('click', 'a', function() {
      drawer.open = false;
    });

    // mdc web used to override the a href link element in the drawer component, causing all links to open with a page reload, use this hack if your version still does, assign every a href link a custom-link class and add data attributes to keep things the Ember way

    let router = get(component, "router");

    component.$().on("click" , ".custom-link" , function(e) {
      e.preventDefault();

      drawer.open = false;

      let routeName = $(this).data("route");
      let modelId = $(this).data("id");

      if(modelId){
        router.transitionTo(routeName , modelId);
      } else {
        router.transitionTo(routeName);
      }
    });

  }
});