Ember.js Ember JS:如何导入材料组件Web JS
我正在尝试将MaterialComponents Web(MDC Web)与EmberJS应用程序结合使用。我用纱线安装了Ember.js Ember JS:如何导入材料组件Web JS,ember.js,Ember.js,我正在尝试将MaterialComponents Web(MDC Web)与EmberJS应用程序结合使用。我用纱线安装了材料组件web yarn add material-components-web --dev 这将安装材料组件-web@0.41.0. 我有sass/CSS工作,但不知道如何包含/导入JS。有人能告诉我如何将其导入到我的组件js文件和/或组件模板文件中吗 当我执行以下操作时,我得到一个无文件错误 app.import('node_modules/material-compo
材料组件web
yarn add material-components-web --dev
这将安装材料组件-web@0.41.0.
我有sass/CSS工作,但不知道如何包含/导入JS。有人能告诉我如何将其导入到我的组件js文件和/或组件模板文件中吗
当我执行以下操作时,我得到一个无文件错误
app.import('node_modules/material-components-web/dist/material-components-web.js')
谢谢你的帮助 这是我在我的网站中通常使用材质组件的方式。从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)以便将文件排除在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 top app bar组件(仅限最新的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);
注意:始终使用Didinserbook很重要,原因有二。
1.)根据Ember文档,didInsert是在保证将组件的HTML插入DOM的位置。
2.)根据Fastboot文档,在节点中运行的Fastboot模式下不会执行didInsert,但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);
}
});
}
});
您是否可以添加已安装的material components web的版本?您在此项目中使用的是什么版本的Ember和Ember CLI?感谢您的回复。我仍然收到错误,我相信这些错误与组件JS文件中缺少导入有关。您可以在发布的文件顶部共享导入语句吗?我假设您有:从'@ember/Component'导入组件;我猜与mdc组件有关的东西。。。。感谢这不是您必须导入的MDC组件,如果您保持这样,您的整个余烬项目将非常简单。我已经分享了一个真实的例子,我已经用了两年了。仍然在努力解决这个问题。。。我在这里创建了一个项目:以便所有代码都可用。文本输入的样式看起来正确,但浮动标签的JS似乎不起作用。还得到了x-input.js中未使用的变量的错误。太好了,我已经查看并发送了PR,请查看更改,主要问题是let MDCTextField=mdc.textField.MDCTextField中缺少大写F;虽然也做了一些清理,导入路由器是没有必要的,我只做了抽屉组件,因为MDCWeb用来覆盖它。太棒了!谢谢你帮我搞定那个老头子!