ember/handlebars - ブール値に基づいてオブジェクトクラスを切り替えるにはどうすればいいですか？

Question

私はbootstrap4と書式をつけており、ember-cp-validationsを使って検証しています。 showNameErrorがtrueの場合

<div class="form-group {{if showNameError 'has-danger' ''}}"> 
    <label for="name" class="cols-sm-2 control-label">Full Name</label> 
    <div class="cols-sm-10"> 
     <div class="input-group"> 
     <span class="input-group-addon">{{fa-icon "user"}}</span> 
     {{input id="name" class="form-control" value=user.firstname placeholder="Enter your Name" focus-out=(action (mut showNameError) true)}} 
     </div> 
    </div> 

    {{#if showNameError}} 
     {{#if (v-get user "firstname" "isInvalid")}} 
     <div class="form-control-feedback container"> 
      <span>{{v-get user 'firstname' 'message'}}</span> 
     </div> 
     {{/if}} 
    {{/if}} 
    </div> 

{{if showNameError 'has-danger' ''}}使用して、私はそれが偽であるときしかし、クラスが残されているとhas-dangerは解消されない、has-dangerにクラスを設定することができています。後、あなたが見ることができるよう

1. するとページが読み込ま

2. 私はエラーを強制

3. 私はエラーを修正した後

私はエラーを修正したhas-dangerクラスが残っています。私の質問は、入力が有効かどうかに基づいてクラスを切り替えることができるかどうかです。

Answer 1

変更されている必要があります。

<div class="form-group {{if showNameError (if (v-get user 'firstname' 'isInvalid') 'has-danger' 'has-success')}}"> 
<label for="name" class="cols-sm-2 control-label">Full Name</label> 
<div class="cols-sm-10"> 
    <div class="input-group"> 
    <span class="input-group-addon">{{fa-icon "user"}}</span> 
    {{input id="name" class="form-control" value=user.firstname placeholder="Enter your Name" focus-out=(action (mut showNameError) true)}} 
    </div> 
</div> 

{{#if showNameError}} 
    <div class="form-control-feedback container"> 
    <span>{{v-get user 'firstname' 'message'}}</span> 
    </div> 
{{/if}}