Плагин jQuery не работает с Aurelia только в Firefox

Question

Я начал проект Aurelia, и я решил использовать this plugin, чтобы включить маскировку ввода для телефонных номеров, используя реализацию, аналогичную той, что видна в this post.

Он отлично работает в Chrome и Safari, однако он просто не работает в Firefox. Нет ошибок или другой полезной информации. Примеры на выше связаны демо-страницы работы просто отлично, однако, так что я уверен, что это должно быть что-то с моей реализации:

JS:

import {inject, NewInstance} from 'aurelia-dependency-injection'; 
import {ValidationController, ValidationRules, validateTrigger} from 'aurelia-validation'; 
import 'igorescobar/jQuery-Mask-Plugin' 

@inject(NewInstance.of(ValidationController)) 

export class MyForm { 
    async activate(params, routeConfig) { 
    // do stuff if there are route parameters 
    } 

    bind() { 
    $('#PhoneNumber').mask('(000) 000-0000'); 
    } 

    constructor(controller) { 
    this.controller = controller; 
    this.controller.validateTrigger = validateTrigger.manual; 
    } 

    submit() { 
    this.controller.validate() 
     .then(errors => { 
     if (errors.length === 0) { 
      // do a thing 
     } else { 
      // do something else 
     } 
     }); 
    } 
} 

ValidationRules 
    .ensure('phoneNumber').displayName('Phone number') 
    .minLength(10).withMessage('Phone number must be at least 10 characters') 
    .maxLength(14).withMessage('Phone number is too long') 
    .matches(/[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}/).withMessage('Please provide a valid phone number') 
    .on(MyForm); 

HTML

<input class="form-control" id="PhoneNumber" type="tel" minlength="10" maxlength="14" pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}" value.bind="phoneNumber & validate" required="required"> 

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

Answer 1

Я работаю с Яном - мы так и не получить его на работу в Firefox, как оригинальный вопрос закодирован.

Мы в конечном итоге заменили его на jquery.inputmask, потому что мы столкнулись с проблемами совместимости с jquery.mask ('igorescobar/jQuery-Mask-Plugin').

Вот это клей, который сделал его работу (на основе Two-Way binding in an Aurelia Custom Attribute):

ввода-mask.js

import {inject, customAttribute, bindable, bindingMode} from 'aurelia-framework'; 
import 'jquery.inputmask'; 
import 'jquery.inputmask.numeric'; 

@customAttribute('input-mask') 
@inject(Element) 
export class InputMaskCustomAttribute { 

    @bindable({defaultBindingMode: bindingMode.twoWay}) unmaskedValue; 

    @bindable maskOptions; 

    element; 

    isValidInputElement; 
    // The maskedinput jquery pluggin does not allow the events that aurelia needs 
    // for binding to get through. So we will manually put them through. 
    // This is the list of events we are going to look for. "focusout" allows for the value 
    // to be correct intime for "onblur". 
    aureliaBindEvents = 'focusout'; 
    eventTarget = undefined; 

    constructor(element) { 
    if (element instanceof HTMLInputElement) { 
     this.element = element; 
     this.isValidInputElement = true; 
     this.eventTarget = $(this.element); 
    } else { 
     this.isValidInputElement = false; 
    } 
    } 

    bind() { 
    this.element.value = this.unmaskedValue; 
    } 

    attached() { 
    this.setupMask(); 
    } 

    detached() { 
    this.tearDownMask(); 
    } 

    maskOptionsChanged(newValue, oldValue) { 
    this.tearDownMask(); 
    this.setupMask(); 
    } 

    setupMask(mask) { 
    if (this.isValidInputElement && this.maskOptions) { 
     this.eventTarget.inputmask(this.maskOptions); 
     this.eventTarget.on(this.aureliaBindEvents, (e) => { 
     this.unmaskedValue = this.eventTarget.inputmask('unmaskedvalue'); 
     this.fireEvent(e.target, 'input'); 
     }); 
    } 
    } 

    tearDownMask() { 
    if (this.isValidInputElement) { 
     if (this.eventTarget) { 
     this.eventTarget.off(this.aureliaBindEvents); 
     this.eventTarget.inputmask('remove'); 
     } 
    } 
    } 

    createEvent(name: string) { 
    let event = document.createEvent('Event'); 
    event.initEvent(name, true, true); 
    return event; 
    } 

    fireEvent(element: HTMLElement, name: string) { 
    var event = this.createEvent(name); 
    element.dispatchEvent(event); 
    } 

} 

widget.html

<require from="input-mask"></require> 
<input class="form-control" type="text" maxlength="12" 
    input-mask="mask-options.bind: {alias: 'currency', rightAlign: false, allowMinus:false, allowPlus: false}; unmasked-value.bind: target['monthly-payment'] & validate" /> 

Answer 2

Вы можете использовать команды jquery на событии attached() (после html-рендеринга), а не на bind(). Попробуйте это:

attached() { 
    $('#PhoneNumber').mask('(000) 000-0000'); 
}