дизайн бутстрапа и Aurelia

Question

Я работаю над этим некоторое время, и я не могу заставить это работать, я готов выкинуть компьютер из окна!

Использование скелет-навигатора Aurelia для установки bootstrap-material-desing с использованием jstpm 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) После некоторую помощь по gitter вы можете использовать обратный вызов attach() для запуска этого кода, но это работает только для каждого класса, поэтому мне нужно будет добавить

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

В качестве альтернативы вышеперечисленному кто-то из gitter предложил использовать конвейер маршрутизатора для его вызова, я попробовал это и до сих пор не смог загрузить его на каждую страницу, добавив его в конвейер после следующих документов, которые я добавил следующим образом:

config.addPipelineStep('modelbind', BSMaterial); 

затем

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

Это работает частично, если вы нажмете на навигационные ссылки, то вы получите эффект волны, но попробуйте нажать на кнопку отправки не пульсация эффектов, так что, кажется, не применяя для каждого класса, но только для маршрутизатора, я думаю,

Другая проблема связана с другим эффектом Б.С. материала, вы можете добавить класс CSS для элемента управления вводом называется

floating-label

, то при нажатии на входе управления замещающий текст движется а затем на потерянном фокусе он движется назад, но с Aurelia вы можете видеть, что текст заполнителя уже перемещен вверх. Если вы удалите значение.bind, то есть удалите value.bind="firstName", то заполнитель будет анимировать, как и в режиме onfocus и lostfocus, поэтому что-то происходит с value.bind, который мешает.

Не может быть так сложно получить что-то простое, как этот плагин 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(); 
     // 
    } 
} 

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:

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

Затем инициализировать самозагрузки-материал app.js в attached обратного вызова:

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

Посмотрите, помогает ли это. :-)

С уважением, Daniel

редактировать: arrive.js использует Mutation Observers (см ссылку на совместимость браузера) - это может быть проблема с IE < 11. Есть polyfills для этого, которые Я еще не пробовал. Например: megawac/MutationObserver или Polymer/MutationObservers