Ember 无法通过验证电子邮件 enable/disable

Question

我正在尝试验证 email 地址并相应地启用或禁用操作按钮。但这是行不通的。我是 emberjs 的新手，有人可以帮帮我吗？ Here is my Tutorial

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', /^.+@.+\..+$/),
    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', '');
        }
    }
});

当我输入有效的电子邮件时，按钮无法启用！！提前致谢。

更新：

在浏览器中出现此错误：

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

Answer 1

你的案例的主要问题是你使用的是纯 html5 输入，它没有绑定到控制器的 emailAddress 属性；即使您输入输入也是如此； emailAddress 的值不会改变；这意味着将不会重新计算依赖于 emailAddress（isValid、isDisabled）的计算属性。

你应该怎么办？您可以使用 ember 的输入助手来执行双向绑定，并使一切按预期工作。请参阅以下 twiddle，它同时显示了 html5 输入和 ember 的 input 助手 ({{input value=emailAddress ..}})。

一些注意事项：如果您坚持使用 html 输入，那么您需要将要绑定到控制器的内容包裹在花括号 ({{}}) 中。例如; <input value={{emailAddress}}/> 将以单向方式将 emailAddress 字段的值绑定到输入。如果您使用纯html5输入，您需要自己处理输入的change事件以将值反映到emailAddress属性；但是 ember 的 input 助手已经进行了双向绑定，对于 ember 初学者来说已经足够了。

另一个注意事项是；我看到你定义了 actualEmailAddress computed 属性;但它永远不会运行！原因是;如果计算属性未被使用（即它们未绑定到模板），则它们不会运行；他们很聪明！

我没有看教程；但我建议从头到尾完成它，以获得理解正在发生的事情的线索。顺便一提;我对您收到的弃用警告了解不多；但我可以保证这与您遇到的问题无关。

Ember 无法通过验证电子邮件 enable/disable

Ember not able to enable/disable by validating email

javascript

ember.js