EmberJs는 함수의 반환 문자열을 클래스 이름으로 추가합니다.

Question

기본적으로 EmberJS Application이 있습니다. 이 문서에서 다른 유효성 검사 상태를 보여주고 싶습니다. html 클래스 특성을 업데이트하고 싶습니다. 이 폼 요소는 각각 ""(비어 있음), "has-success"또는 "has-error"라는 세 가지 이름을 가질 수 있습니다.

기본적으로 폼의 상태에 따라 AngularJS ng 클래스와 비슷한 3 개 중 하나를 반환하는 계산 된 속성에서 클래스 이름을 바인딩하고 싶습니다.

나는 이런 식으로 뭔가 싶어 :

<input class="{{ validationState }} form-control"> 

이 가능이 뭔가 :

validationState: function() { 
    if(element.state === "pristine") { 
    return ""; 
    } 
    else if(element.state === "valid") { 
    return "has-success"; 
    } 
    else{ 
    return "has-error"; 
    } 
} 

템플릿을, 나는 그런 일을하십니까? 그렇다면 최선의 방법은 무엇입니까? 맞춤 헬퍼 만들기? 아니면 이미 그렇게 할 수있는 방법이 있습니까?

Answer 1

도우미 bind-attr을 사용하고 validationState을 계산 된 속성으로 지정하십시오. 이 바인드 - ATTR 도우미를 사용하여이

{{input value=inputValue class=validationState}} 

App.IndexController = Em.ArrayController.extend({ 
    inputValue: 'test', 
    validationState: function() { 
    if(this.get('inputValue')) { 
     return 'valid'; 
    } 
    return 'empty'; 
    }.property('inputValue') 
}); 

Here is a working example.