Ember JS：如何导入Material Components Web JS [英] Ember JS: How to import Material Components Web JS

问题描述

我正在尝试通过EmberJS应用程序使用Material Components Web（MDC-Web）。我已经用纱安装了 material-components-web 。

I'm trying to use Material Components Web(MDC-Web) with an EmberJS application. I've installed material-components-web with Yarn.

yarn add material-components-web --dev

此安装了material-components-web@0.41.0。

This installed material-components-web@0.41.0.

我可以使用sass / CSS，但无法弄清楚如何包括/导入JS。有人可以告诉我如何将其导入到我的组件js文件和/或我的组件模板文件中。

I have the sass/CSS working but can't figure out how to include/import the JS. Could someone show me how it would import that into my component js file and/or my component template file.

当我执行

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

谢谢您的帮助！

推荐答案

这是我通常的方式在我的 Ember项目中使用Material Components Web。从Ember 2.x版本到最新的3.x版本，对我一直有效。

This is how I normally use Material Components Web in my Ember project. Has worked for me since Ember version 2.x upto the latest 3.x.

首先是ember-cli-build.js。导入所需的js文件

First in ember-cli-build.js. Import the required js file

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

使用部分仅在使用Fastboot（应使用）以排除文件时适用

The using part is only applicable if you use Fastboot (which you should) so as to exclude the file from executing in a Fastboot environment.

然后不要担心，在didInsertElement钩子上的Ember组件中，激活MDC组件，例如我使用过的抽屉式组件

Then fear not, in an Ember component on the didInsertElement hook, activate the MDC component for example for a modal drawer component I have used code like this.

  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）

For a MDC top-app-bar component (latest MDC only) I've used this

  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 Docs的说法，didInsert可以确保将组件的HTML插入DOM。
2.）根据Fastboot Docs的说法，didInsert不在运行于Node的FastBoot模式下执行，而MDC是浏览器。

Note: Its important to always use the didInsertHook for 2 reasons. 1.) According to Ember Docs, didInsert is at that point where the component's HTML is guaranteed to be inserted in the DOM. 2.) According to Fastboot Docs, didInsert is not executed in FastBoot mode which runs in Node yet MDC is a browser thing.

享受！

编辑：基于以下问题

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 Components Web JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！