Twitter bootstrap bootstrap材料设计与Aurelia

我已经为此工作了一段时间，但我无法让它工作，我准备把电脑扔出窗外

使用Aurelia的骷髅导航安装使用jspm安装引导材料。然后将其作为导入添加到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);

然后

这在一定程度上是有效的，如果你点击导航链接，你就会得到连锁反应，但是试着点击提交按钮没有连锁反应，所以我想它似乎不是应用于每个类，而是应用于路由器

另一个问题是bs材质的另一个效果，您可以将css类添加到名为

浮动标签

，然后单击输入控件时，占位符文本向上移动，然后在失去焦点时向下移动，但使用Aurelia可以看到占位符文本已向上移动。如果删除value.bind，即删除

value.bind=“firstName”

，则占位符在onfocus和lostfocus上都会按其应有的方式进行动画，因此value.bind发生了干扰

要让这个material design jquery插件这样简单的东西正常工作不会这么难，我甚至还没有尝试与Aurelia交互，我只是希望它能像您通过脚本标记将它添加到普通html页面一样正常工作。我知道是我还不了解奥雷莉亚

如果能帮上忙，那就太好了

当前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();
        //
    }
}

欢迎光临

<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>

${heading}
名字
姓
全名
${fullName | upper}

自引导以来，材质可用于初始化动态添加的元素。我已经在导航框架应用程序中试用过了，它对我很有效（试用过表单按钮和浮动标签）

按照导航框架结构，我刚刚将其导入main.js：

import 'bootstrap';
import 'uzairfarooq/arrive';
import 'FezVrasta/bootstrap-material-design';

然后在所附的

回调中初始化app.js中的引导材料：

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();
    }
}

看看是否有帮助。：-）

问候,，
丹尼尔

编辑：Arrival.js利用（查看浏览器兼容性链接）-这可能是IE的一个问题，你是Gitter频道中有相同问题的人吗？我认为我们已经解决了您在那里遇到的问题，因此如果没有，请让我知道。是的，谢谢您的帮助，但我仍然无法使pipleline正常工作，因此它运行$.material.init（）；每一页。此外，第二个问题是，即使material.init确实运行value.bind，但它似乎与material js冲突，没有错误，只是不起作用，我在上面的帖子中概述了我尝试的内容以及剩余问题的细节。非常感谢您的帮助。我在这里写了一篇关于创建自定义元素包装css框架的博客：
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();
    }
}