1

値が無効な場合、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.TextFieldのような組み込みビューを使用してEmber.JSでこれを行う方法はありますか？

4

1 に答える 1

5

これを行う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"}}

重要 上記のコードはニーズを満たす可能性がありますが、テキストフィールドが多い場合はアプリケーションの速度が低下する可能性があります。値が変更されるたびに計算されたプロパティが実行されるため、クリックすると適用される可能性のある保存ボタンアクションを使用することをお勧めします。次のようにテキストフィールドへの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);
  }
}
于 2012-11-20T07:04:27.513 に答える