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无法通过验证电子邮件来启用/禁用

回答

相关问题