bootstrap材料設計和Aurelia

Question

我一直在努力這一段時間，我不能得到這個工作，我準備把計算機扔出窗外！

使用Aurelia的skeleton-nav安裝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）After一些關於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(); 
     // 
    } 
} 

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作爲自舉的材料可以使用arrive.js初始化動態地添加元素。我用導航框架應用程序試過它，它對我很有用（嘗試過按鈕和浮動標籤）。

繼導航骨架結構，我剛剛導入到main.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(); 
    } 
} 

：

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

然後在attached回調初始化引導材料在app.js看看它是否有幫助。 :-)

問候， 丹尼爾

編輯：arrive.js利用的Mutation Observers（見鏈接，瀏覽器的兼容性） - 這可能是一個問題與IE < 11.有針對polyfills，這我還沒有嘗試過。例如：megawac/MutationObserver或Polymer/MutationObservers