Ember JS: Как импортировать компоненты материалов Web JS - PullRequest
Новая
       33

Ember JS: Как импортировать компоненты материалов Web JS

0 голосов
/ 30 октября 2018

Я пытаюсь использовать Material Components Web (MDC-Web) с приложением EmberJS. Я установил material-components-web с пряжей. 

yarn add material-components-web --dev

Это установленный материал-components-web@0.41.0.

У меня работает sass / CSS, но я не могу понять, как включить / импортировать JS. Может ли кто-нибудь показать мне, как это импортировать это в мой файл компонента js и / или файл шаблона моего компонента.

Я получаю no file error, когда делаю 

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

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 30 октября 2018

Так я обычно использую Web компонентов материалов в моем проекте Ember . Работает для меня с версии 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'
    }]
  });

Используемая часть применима только в том случае, если вы используете Fastboot (что вам следует), чтобы исключить запуск файла в среде Fastboot.

Тогда не бойтесь, в компоненте Ember на крюке didInsertElement активируйте компонент 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 Docs, didInsert находится в тот момент, когда HTML-код компонента гарантированно будет вставлен в DOM. 2.) Согласно документации Fastboot, 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);
      }
    });

  }
});
...