twitter-bootstrap – bootstrap材料设计和Aurelia

使用Aurelia的skeleton-nav安装bootstrap-material-desing使用jspm install bootstrap-material.然后在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();
//}

作为一个替代上面的人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',title: 'Test'},{route: 'flickr',moduleId: './flickr',nav: true},{route: 'child-router',moduleId: './child-router',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>