TextField에 클래스 바인딩

Question

Ember.TextField의 값이 유효하지 않은 경우 자동으로 Ember.TextField를 강조 표시하려고합니다.

지금은 작품이 있지만, 못생긴 나의 템플릿에 이런 일이 :

{{#if view.fieldInvalid}} 
    {{view Ember.TextField valueBinding="view.fieldValue" classNames="span1p5 highlight"}} 
{{else}} 
    {{view Ember.TextField valueBinding="view.fieldValue" classnames="span1p5"}} 
{{/if}} 

Ember.JS에서이 작업을 수행 할 수있는 방법과 거기에 내장 Ember.TextField 같은보기?

Answer 1

//First extend Ember.TextField in your view 
validatingTextField = Ember.TextField.extend({ 
    //Now if isInvalid is true CSS class "highlight" is applied to text field 
    /* other ways include 
    isValid::error-class error-class will be applied when isValid is false 
    isValid:normal-class:error-class, normal-class is applied when isValid is true else error-class is applied 
    */ 
    classNameBindings: ['isInvalid:highlight',':span1p5'], 
    //If you have static classes you define them as :my-class-name 
    isInvalid: function(){ 
    if(this.get('value').trim() === ""){ 
     return true; 
    }else{ 
     return false; 
    } 
    }.property('value') 
}) 

지금 위의

{{view view.validatingTextField valueBinding="view.fieldValue"}} 

중요 귀하의 핸들에 한정되어 사용하는 계산 된 속성 클래스 명 바인딩을 추가하고이 일을하는 한 가지 방법 위의 코드는 당신의 필요를 충족 할 수있다 계산 된 속성이 값의 모든 단일 변경에 대해 실행될 때 많은 텍스트 필드가있는 경우 응용 프로그램의 속도가 느려질 수 있습니다. clic에서 저장 단추를 사용하는 것이 좋습니다 k는 다음과 같이 CSS 클래스를 텍스트 필드에 적용 할 수 있습니다.

validatingTextField = Ember.TextField.extend({ 
    classNameBindings: ['isInvalid:highlight',':span1p5'] 
}) 

save: function(){ 
    //your code for save 
    if(this.get('validatingTextField.value').trim()===""){ 
    this.get('validatingTextField').set('isInvalid', true); 
    } 
}