bootstrap material design and Aurelia -

i have been working on awhile , cannot working, ready throw computer out window!

using aurelia's skeleton-nav install bootstrap-material-desing using jspm install bootstrap-material. add import below bootstrap in app.js

import 'bootstrap'; import 'bootstrap/css/bootstrap.css!'; import 'bootstrap-material';  @inject(router) export class app { 

the css , js import fine, initializing js problem comes in. initial calling $.material.init(), code adds ripple effects when click on button ripple or wave animation , problem comes in, getting $.material.init() work in aurelia correctly

1) after on gitter can use attach() callback run code works per class, each page/class have add

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

as alternative above on gitter suggested using router pipeline call it, tried , still not load on each page, when adding pipeline following docs added this

config.addpipelinestep('modelbind', bsmaterial); 

then

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

this works partially, if click on navigation links ripple effects, try clicking on submit button no ripple effects, seems not applying each class router, guess

another problem effect of bs material, can add css class input control called

floating-label

, when click on input control placeholder text moves , on lost focus moves down, aurelia can see placeholder text moved up. if remove value.bind, ie remove value.bind="firstname" placeholder animates should both on onfocus , lostfocus, happening value.bind interfering.

it can't difficult simple material design jquery plugin work, not trying interact aurelia yet, want work adding normal html page via script tags. know it's me not understanding aurelia yet.

any getting working great.

current app.js trying use pipeline method

import {inject} 'aurelia-framework'; import {router} '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 route filter authorize extensibility point             config.addpipelinestep('modelbind', bsmaterial); // transparently creates pipeline "myname" if doesn't exist.             //  config.addpipelinestep('modelbind', 'myname'); // makes entire `myname` pipeline run part of `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 route has "auth" key         // reason using `nextinstructions` because         // 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> 

as of this github issue bootstrap-material can use arrive.js initialize dynamically added elements. i've tried navigation-skeleton app , worked me (tried form buttons , floating labels).

following navigation-skeleton structure, i've imported main.js:

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

then initialize bootstrap-material in app.js in attached callback:

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

see if helps. :-)

regards, daniel

edit: arrive.js makes use of mutation observers (see link browser compatibility) - issue ie <11. there polyfills that, have not tried yet. example: megawac/mutationobserver or polymer/mutationobservers