我一直在研究这个问题,我不能让这个工作,我准备把计算机扔出窗外了!
使用jurem bootstrap-material使用Aurelia的skeleton-nav安装bootstrap-material-desing。然后在app.js
中将其添加为bootstrap下面的导入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();
//}
作为上述人员的替代方案,有人建议使用路由器管道来调用它,我尝试了这个并且仍然无法在每个页面上加载它,当我按照这样添加的文档将其添加到管道时< / p>
config.addPipelineStep('modelbind', BSMaterial);
然后
class BSMaterial {
run(routingContext, next) {
$.material.init();
console.log('bsmaterial fired');
return next();
//
} }
这部分工作,如果你单击导航链接然后你得到涟漪效果,但尝试点击提交按钮没有涟漪效果,所以它似乎不适用于每个类而只是路由器,我猜< / p>
另一个问题是bs材质的另一个影响,你可以将一个css类添加到一个名为
的输入控件
floating-label
,然后当您单击输入控件时,占位符文本向上移动然后在失去焦点时向下移动,但是使用Aurelia,您可以看到占位符文本已经向上移动。如果你删除了value.bind,即删除value.bind="firstName"
,那么占位符在onfocus和lostfocus上都会动画,因此值得发生干扰。
让这个材料设计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();
//
}
}
welcome.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>
答案 0 :(得分:7)
this github issue bootstrap-material可以使用arrive.js来初始化动态添加的元素。我已经尝试使用导航骨架应用程序,它适用于我(尝试过表单按钮和浮动标签)。
遵循导航骨架结构,我只是将其导入main.js:
import 'bootstrap';
import 'uzairfarooq/arrive';
import 'FezVrasta/bootstrap-material-design';
然后在attached
回调中的app.js中初始化bootstrap-material:
export class App {
configureRouter(config, router){
config.title = 'Aurelia';
config.map([
{ route: ['','welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title:'Welcome' },
{ route: 'users', name: 'users', moduleId: 'users', nav: true, title:'Github Users' },
{ route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title:'Child Router' }
]);
this.router = router;
}
attached() {
$.material.init();
}
}
看看它是否有帮助。 : - )
此致 丹尼尔
编辑:arri.js使用Mutation Observers(请参阅浏览器兼容性链接) - 这可能是IE&lt; 11的问题。有这样的polyfills,我还没有尝试过。例如:megawac/MutationObserver或Polymer/MutationObservers