bootstrap material 设计和 Aurelia

Question

我已经为此工作了一段时间，但无法正常工作，我准备把电脑扔掉 window！

使用 Aurelia 的骨架导航安装 bootstrap-material-desing 使用 jspm 安装 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() 回调来运行这段代码，但这只适用于 class，所以每个 page/class 我都必须添加

//attached() {
//    $.material.init();
//}

作为上面有人在 gitter 上的替代建议使用路由器管道来调用它，我尝试了这个但仍然无法在每个页面上加载它，当按照我添加的文档将它添加到管道时这个

config.addPipelineStep('modelbind', BSMaterial);

然后

class BSMaterial {
    run(routingContext, next) {
        $.material.init();
      console.log('bsmaterial fired');
        return next();
        //
    } }

这部分有效，如果你点击导航链接然后你得到连锁反应，但尝试点击提交按钮没有连锁反应，所以它似乎不适用于每个 class 但只是路由器，我猜

另一个问题是 bs material 的另一个效果，你可以添加一个 css class 到一个名为

的输入控件

floating-label

，然后当您单击输入控件时，占位符文本会向上移动，然后在失去焦点时它会向下移动，但是对于 Aurelia，您可以看到占位符文本已经向上移动了。如果您删除 value.bind，即删除 value.bind="firstName"，那么占位符会在焦点和焦点丢失时进行动画处理，因此 value.bind 会发生干扰。

让像这个 material 设计 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>

Answer 1

从 this github issue bootstrap-material can use arrive.js 开始初始化动态添加的元素。我已经用导航骨架应用程序试过了，它对我有用（试过表单按钮和浮动标签）。

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

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

然后在attached回调中初始化bootstrap-material in 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();
    }
}

看看有没有帮助。 :-)

此致，丹尼尔

编辑：arrive.js 利用了 Mutation Observers (see the link for browser compatibility) - this could be an issue with IE <11. There are polyfills for that, which I have not tried yet. For example: megawac/MutationObserver or Polymer/MutationObservers

bootstrap material 设计和 Aurelia

bootstrap material design and Aurelia

twitter-bootstrap

material-design

aurelia

bootstrap-material-design