ember/handlebars - Как переключить класс объекта на основе логического значения?

Question

У меня есть форма в стиле bootstrap4 и использую ember-cp-validations чтобы подтвердить это.

  <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 когда showNameError верно, однако, когда оно ложно, класс остается там и 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}}