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

问题描述

我正在尝试将 Material Components Web(MDC-Web) 与 EmberJS 应用程序一起使用.我已经用 Yarn 安装了 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 项目.从 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'
    }]
  });

using 部分仅适用于您使用 Fastboot(您应该这样做)以排除文件在 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 top-app-bar 组件(仅限最新的 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 不是在 FastBoot 模式下执行的，它在 Node 中运行，而 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 组件 Web JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！