Ember無法通過驗證電子郵件來啓用/禁用

我試圖驗證email地址，並相應地啓用或禁用操作按鈕。但它不起作用。我對emberjs非常陌生，請幫助我嗎？ Here is my Tutorial Ember無法通過驗證電子郵件來啓用/禁用

HTML代碼（HBS）：

<div class="jumbotron text-center"> 
    <h1>Coming Soon</h1> 

    <br/><br/> 

    <p>Don't miss our launch date, request an invitation now.</p> 

    <div class="form-horizontal form-group form-group-lg row"> 
     <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-1 col-md-5 col-md-offset-2"> 
      <input type="email" value=emailAddress class="form-control" placeholder="Please type your e-mail address." autofocus="autofocus"/> 
     </div> 
     <div class="col-xs-10 col-xs-offset-1 col-sm-offset-0 col-sm-4 col-md-3"> 
      <button class="btn btn-primary btn-lg btn-block" disabled={{isDisabled}} {{action 'saveInvitation'}}>Request invitation</button> 
     </div> 
    </div> 

    <br/><br/> 
</div>

控制器JS：

import Ember from 'ember'; 

export default Ember.Controller.extend({ 

    emailAddress:'', 
    isValid: Ember.computed.match('emailAddress', /^[email protected]+\..+$/), 
    isDisabled: Ember.computed.not('isValid'), 
    actualEmailAddress: Ember.computed('emailAddress', function() { 
     console.log('actualEmailAddress function is called: ', this.get('emailAddress')); 
    }), 
    emailAddressChanged: Ember.observer('emailAddress', function() { 
     console.log('observer is called', this.get('emailAddress')); 
    }), 
    actions: { 

     saveInvitation() { 
      alert(`Saving of the following email address is in progress: ${this.get('emailAddress')}`); 
      this.set('responseMessage', `Thank you! We've just saved your email address: ${this.get('emailAddress')}`); 
      this.set('emailAddress', ''); 
     } 
    } 
});

當我輸入有效電子郵件，按鈕不能夠！在此先感謝。

UPDATE：

在瀏覽器中我得到這個錯誤：

DEPRECATION: Usage of `router` is deprecated, use `_routerMicrolib` instead.

來源

2017-06-29 3gwebtrain

與你的情況的主要問題是，你使用的是不綁定到的emailAddress屬性的純HTML5輸入控制器;即使你輸入了輸入; emailAddress的值不會改變;這意味着將不會重新計算取決於emailAddress（isValid，isDisabled）的計算屬性。

你應該怎麼做？您可以使用執行雙向綁定的ember的輸入幫助程序，並使所有內容按預期工作。請參閱以下twiddle，它將html5輸入和ember的input幫助程序（{{input value=emailAddress ..}}）一起顯示。

幾個注意事項：如果你堅持使用html輸入，那麼你需要將內容綁定到花括號內的控制器（{{}}）。例如; <input value={{emailAddress}}/>將以單向方式將emailAddress字段的值綁定到輸入。如果您使用純html5輸入，則需要處理change事件輸入以自行反映emailAddress屬性的值;但input燼的助手已經做出了雙向綁定，這對燼起動器來說已經足夠了。

另一個說明是;我看到你定義了actualEmailAddress計算屬性;但它永遠不會運行！原因是;如果它們沒有被消費（即它們沒有被綁定到模板），計算的屬性將不會運行;他們很聰明！

我沒有翻閱本教程;但我會建議從頭到尾完成它，以獲得理解發生的線索。順便一提;我不太瞭解您收到的棄用警告;但我可以保證它與您所面臨的問題無關。

來源

2017-06-29 14:00:21 alptugd

感謝您的詳細信息。我今天剛剛開始了'餘燼'。我正在關注這個教程。 – 3gwebtrain

很棒;用餘燼玩得開心:) – alptugd

我剛開始學習Ember。你能推薦一些好的教程嗎？ – 3gwebtrain

Ember無法通過驗證電子郵件來啓用/禁用

回答

相關問題