Aurelia 유효성 검사가 텍스트 상자 구성 요소에 바인딩되지 않음

Question

일부 스타일 및 레이블과 텍스트 상자의 조합을 감싸는 간단한 텍스트 상자 구성 요소를 만들었습니다. 일반적인 바인딩 구문을 사용하여이 컨트롤에 유효성 검사를 바인딩하려고하면 블러 기능으로 인해 유효성 검사가 실행되지 않습니다.

이

<template> 
    <div class="form-field"> 
     <div class="form-field__label"> 
      ${label} 
      <input name.bind="name" id.bind="name" class="form-field__input" type.bind="type" value.bind="value" tabindex.bind="tabIndex"></input> 
     </div> 
    </div> 
</template> 

그리고 뷰 모델은 다음과 같습니다 :

import {bindable, bindingMode} from 'aurelia-framework'; 

export class Textbox { 
    @bindable({defaultBindingMode: bindingMode.twoWay}) value : string; 
    @bindable label : string; 
    @bindable type : string = "textbox"; 
    @bindable tabIndex: number; 
    @bindable hidden : boolean; 
    @bindable name : string = ''; 
} 

그리고 구성 요소는 다음과 같이 사용됩니다 같은

구성 요소보기 보이는 데이터 바인딩은대로 작동

<textbox value.bind="emailAddress & validate" type="email"></textbox> 

예상했지만 바인딩이 작동하지 않습니다. 어떤 아이디어라도 감사합니다.

Answer 1

요소는 blur 이벤트를 발생시켜야합니다. 요소가 맞춤이므로, "흐리게"나타날 때 코드를 추가해야합니다. 귀하의 경우에는 매우 간단합니다. 사용자 정의 요소의 템플릿에는 하나의 포커스 가능 요소 만 있습니다. 여기

은 예입니다 : https://github.com/aurelia/validation/issues/297

: 우리는이를 얻을 수 있습니다

import {bindable, bindingMode, DOM, inject} from 'aurelia-framework'; 

@inject(Element) 
export class Textbox { 
    @bindable({defaultBindingMode: bindingMode.twoWay}) value: string; 
    @bindable label: string; 
    @bindable type: string = "textbox"; 
    @bindable tabIndex: number; 
    @bindable hidden: boolean; 
    @bindable name: string = ''; 
    element: Element; 

    constructor(element) { 
    this.element = element; 
    } 

    blur() { 
    this.element.dispatchEvent(DOM.createCustomEvent('blur')); 
    } 
} 

https://gist.run?id=06bda9ac6e068ad21dab7b470f69c566

textbox.html

<template> 
    <div class="form-field"> 
    <div class="form-field__label"> 
     ${label} 
     <input name.bind="name" 
      id.bind="name" 
      class="form-field__input" 
      type.bind="type" 
      value.bind="value" 
      tabindex.bind="tabIndex" 
      blur.trigger="blur()"> 
    </div> 
    </div> 
</template> 

textbox.js는 문서에 추가