我正在尝试将Material Components Web(MDC-Web)与EmberJS应用程序一起使用。我已经用纱安装了material-components-web
。
yarn add material-components-web --dev
此安装了material-components-web@0.41.0。
我可以使用sass / CSS,但无法弄清楚如何包括/导入JS。有人可以告诉我如何将其导入到我的组件js文件和/或我的组件模板文件中。
我做
时得到no file error
app.import('node_modules/material-components-web/dist/material-components-web.js')
感谢您的帮助!
答案 0 :(得分: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'
}]
});
仅当您使用快速启动(应该使用)以排除文件在快速启动环境中执行时,使用部分才适用。
然后不用担心,在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 Docs的说法,didInsert可以确保在DOM中插入组件的HTML。 2.)根据Fastboot Docs的说法,didInsert不在运行在Node上的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);
}
});
}
});