我已经为此工作了一段时间，但我无法让它工作，我正准备把电脑扔出窗外！
使用 Aurelia 的骨架导航安装bootstrap-material- desing 使用 jspm install bootstrap-material。然后将其作为导入添加到您的 app.js 中的引导程序下方
import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';
import 'bootstrap-material';
@inject(Router)
export class App {
css 和 js 导入正常，但初始化 js 是问题所在。您通过调用 $.material.init() 对其进行初始化，此代码添加了涟漪效果，因此当您单击按钮时，您会看到涟漪或波浪动画，这就是问题所在，让 $.material.init() 在 Aurelia 中正确工作
1）在 gitter 上获得一些帮助后，您可以使用 attach() 回调来运行此代码，但这仅适用于每个类，因此我必须添加每个页面/类
//attached() {
// $.material.init();
//}
作为上述 gitter 上有人建议使用路由器管道来调用它的替代方案，我尝试了这个，但仍然无法在每个页面上加载它，当按照我这样添加的文档将它添加到管道时
config.addPipelineStep('modelbind', BSMaterial);
然后
class BSMaterial {
run(routingContext, next) {
$.material.init();
console.log('bsmaterial fired');
return next();
//
} }
这部分工作，如果你点击导航链接，那么你会得到涟漪效应，但尝试点击提交按钮没有涟漪效应，所以它似乎不适用于每个类，而只是路由器，我猜
另一个问题是bs材质的另一个效果，你可以在一个名为的输入控件中添加一个css类
floating-label
，然后当您单击输入控件时，占位符文本向上移动，然后在失去焦点时它又向下移动，但是使用 Aurelia 您可以看到占位符文本已经向上移动。如果您删除 value.bind，即删除，value.bind="firstName"则占位符会在 onfocus 和 lostfocus 上进行动画处理，因此 value.bind 会发生干扰。
让这个材料设计 jquery 插件这样简单的东西工作起来并不难，我什至还没有尝试与 Aurelia 交互，我只是希望它像你通过脚本将它添加到普通的 html 页面一样工作标签。我知道是我还不了解 Aurelia。
让这项工作得到任何帮助都会很棒。
当前 app.js 尝试使用管道方法
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';
import 'bootstrap-material';
@inject(Router)
export class App {
constructor(router) {
this.router = router;
this.router.configure(config => {
config.title = 'Aurelia';
// config.addPipelineStep('authorize', AuthorizeStep); // Add a route filter to the authorize extensibility point
config.addPipelineStep('modelbind', BSMaterial); // Transparently creates the pipeline "myname" if it doesn't already exist.
// config.addPipelineStep('modelbind', 'myname'); // Makes the entire `myname` pipeline run as part of the `modelbind` pipe
config.map([
{route: ['', 'welcome'], moduleId: './welcome', nav: true, title: 'Welcome'},
{route: 'test', moduleId: './test', nav: true, title: 'Test'},
{route: 'flickr', moduleId: './flickr', nav: true},
{route: 'child-router', moduleId: './child-router', nav: true, title: 'Child Router'}
]);
});
}
}
class AuthorizeStep {
run(routingContext, next) {
// debugger;
// debugger;
// Check if the route has an "auth" key
// The reason for using `nextInstructions` is because
// this includes child routes.
if (routingContext.nextInstructions.some(i => i.config.auth)) {
var isLoggedIn = /* insert magic here */false;
if (!isLoggedIn) {
return next.cancel(new Redirect('login'));
}
}
return next();
}
}
//attached() {
// $.material.init();
//}
class BSMaterial {
run(routingContext, next) {
$.material.init();
console.log('bsmaterial fired');
return next();
//
}
}
欢迎.html
<template>
<section>
<h2>${heading}</h2>
<form role="form" >
<div class="form-group">
<label for="fn">First Name</label>
<input type="text" value.bind="firstName" class="form-control floating-label" id="fn" placeholder="first name">
</div>
<div class="form-group">
<label for="ln">Last Name</label>
<input type="text" value.bind="lastName" class="form-control floating-label" id="ln" placeholder="last name">
</div>
<div class="form-group">
<label>Full Name</label>
<p class="help-block">${fullName | upper}</p>
</div>
<a href="javascript:void(0)" class="btn btn-default">Default</a>
</form>
</section>
</template>