ember.jsで2つの条件が一致しないときに送信ボタンを無効にする

Question

有効なメールとメッセージが入力されていない限り、[送信]ボタンが無効になっている連絡フォームを作成しようとしています。何らかの理由で、逆の方法で動作しています。有効なメールとメッセージが入力されてボタンが無効になったときです。私は新しくemberとcan notはそれを否定するようです。

問い合わせコントローラ

export default Ember.Controller.extend({ 

email: '', 

message: '', 

hasValidEmailAddress: Ember.computed.match('email', /^.+@.+\..+$/), 
hasEnteredMessage: Ember.computed.notEmpty('message'), 

isDisabled: Ember.computed.and('hasValidEmailAddress', 'hasEnteredMessage'), 

actions: { 

    saveMessage() { 
     this.set('responseMessage', `Thank you, your message has been sent. We will get back to you as soon as possible.`); 
     this.set('email', ''); 
     this.set('message', ''); 
    } 
} 

}); 

連絡先テンプレート

<div class='row'> 

    <h2>Contact</h2> 

    <div class='col-md-2'></div> 
    <div class='col-md-8'> 

     <br/><br/> 

     <form> 
      <div class='form-group form-group'> 
       <label for='email' class=''>Email</label> 
       {{input type='email' value=email class='form-control' id='email' placeholder='Email'}} 
      </div> 
      <br/> 
      <div class='form-group form-group'> 
       <label for='message'>Message</label> 
       {{textarea value=message class='form-control' id='message' placeholder='Message'}} 
      </div> 
      <br/> 
      <button class='btn btn-primary btn-default pull-right' disabled={{isDisabled}} {{action 'saveMessage'}}>Send</button> 
     </form> 

    </div> 
</div> 

私はコントローラの両方の内部で引数を否定する、テンプレートにisDisabledを否定しようとしたとisDisabledのためにかっこの外側でnを試した行全体が表示されます。

ご協力いただければ幸いです。

乾杯あなたのコードで

Answer 1

、isDisabledプロパティは、実際にあなたがそれを与えている結果のthats以来、ISENABLEDと呼ばれるべきです。これは、hasValidEmailAddress = trueで、hasEnteredMessage = true => isDisabled = trueの場合、ボタンが無効になるためです。

計算された別のプロパティ をreallyDisabled: Ember.computed.not('isDisabled')にして、それをテンプレートで使用することができます。

それとも、インストールすることができエンバー-真理ヘルパーアドオン（https://github.com/jmurphyau/ember-truth-helpers）、その後、あなたがテンプレート内disabled={{not isDisabled}}