title: bootstrap material design and Aurelia
body: <p>I have been working on this for awhile and I cannot get this working, I am about ready to throw the computer out the window!</p>
  
  <p>Using Aurelia's skeleton-nav install <a href="https://fezvrasta.github.io/bootstrap-material-design/" rel="nofollow">bootstrap-material-desing</a> using jspm install bootstrap-material. Then add it as an import below bootstrap in your app.js</p>
  
  <pre><code>import 'bootstrap';
  import 'bootstrap/css/bootstrap.css!';
  import 'bootstrap-material';
  
  @inject(Router)
  export class App {
  </code></pre>
  
  <p>The css and js import fine, but initializing the js is where the problem comes in.  You initial it by calling $.material.init(), this code adds ripple effects so when you click on a button you get a ripple or wave like animation and this is where the problem comes in, getting $.material.init() to work in Aurelia correctly</p>
  
  <p>1) After some help on gitter you can use the attach() callback to run this code but this only works per class, so each page/class I would have to add</p>
  
  <pre><code>//attached() {
  //    $.material.init();
  //}
  </code></pre>
  
  <p>As an alternative to the above someone on gitter suggested using the router pipeline to call it, I tried this and still could not get it to load on each page, when adding it to the pipeline following the docs I added like this</p>
  
  <pre><code>config.addPipelineStep('modelbind', BSMaterial);
  </code></pre>
  
  <p>then </p>
  
  <pre><code>class BSMaterial {
      run(routingContext, next) {
          $.material.init();
        console.log('bsmaterial fired');
          return next();
          //
      } }
  </code></pre>
  
  <p>This works partially, if you click on the navigation links then you get the ripple effects, but try clicking on the submit button no ripple effects, so it seems not to be applying to each class but just the router, I guess</p>
  
  <p>Another problem is with another effect of bs material, you can add a css class to an input control called </p>
  
  <blockquote>
    <p><code>floating-label</code></p>
  </blockquote>
  
  <p>, then when you click on the input control the placeholder text moves up and then on lost focus it moves back down, but with Aurelia you can see the placeholder text is already moved up.  If you remove the value.bind, ie remove <code>value.bind="firstName"</code> then the placeholder animates as it should  both on onfocus and lostfocus, so something is happening with value.bind that is interfering.</p>
  
  <p>It can't be this difficult to get something as simple as this material design jquery plugin to work, I am not even trying to interact with Aurelia yet, I just want it to work like you would adding it to a normal html page via script tags. I know it's me just not understanding Aurelia yet. </p>
  
  <p>Any help getting this working would be great.</p>
  
  <p>Current app.js trying to use the pipeline method</p>
  
  <pre><code>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 =&gt; {
              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 =&gt; 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();
          //
      }
  }
  </code></pre>
  
  <p>welcome.html</p>
  
  <pre><code>&lt;template&gt;
    &lt;section&gt;
      &lt;h2&gt;${heading}&lt;/h2&gt;
  
      &lt;form role="form" &gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fn"&gt;First Name&lt;/label&gt;
          &lt;input type="text" value.bind="firstName" class="form-control floating-label" id="fn" placeholder="first name"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="ln"&gt;Last Name&lt;/label&gt;
          &lt;input type="text" value.bind="lastName" class="form-control floating-label" id="ln" placeholder="last name"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label&gt;Full Name&lt;/label&gt;
          &lt;p class="help-block"&gt;${fullName | upper}&lt;/p&gt;
        &lt;/div&gt;
    &lt;a href="javascript:void(0)" class="btn btn-default"&gt;Default&lt;/a&gt;
      &lt;/form&gt;
    &lt;/section&gt;
  
  &lt;/template&gt;
  </code></pre>