Ember JS：如何导入 Material 组件 Web JS

Question

我正在尝试将 Material Components Web(MDC-Web) 与 EmberJS 应用程序一起使用。我用 Yarn 安装了 material-components-web。

yarn add material-components-web --dev

这安装了 material-components-web@0.41.0.

我可以使用 sass/CSS，但不知道如何 include/import JS。谁能告诉我如何将其导入我的组件 js 文件 and/or 我的组件模板文件。

当我执行

时，我得到一个 no file error

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

感谢您的帮助！

Answer 1

这就是我在 Ember project 中通常使用 Material Components Web 的方式。从 Ember 版本 2.x 到最新的 3.x.

版本一直为我工作

首先在 ember-cli-build.js 中。导入需要的js文件

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

using 部分仅在您使用 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 顶部应用栏组件（仅限最新的 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.) 根据 Fastboot Docs，didInsert 不在 FastBoot 模式下执行，它在 Node 中运行，但 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);
      }
    });

  }
});

Ember JS：如何导入 Material 组件 Web JS

Ember JS: How to import Material Components Web JS

ember.js