不满足两个条件时禁用send按钮，在ember.js中不起作用

Question

我正在尝试创建一个联系表，其中除非已输入有效的电子邮件和消息，否则禁用了“发送”按钮。 由于某种原因，它的工作方式相反，当输入有效的电子邮件和消息时，该按钮将被禁用。 我是炭烬新手，似乎无法否认它。

接触控制器

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括号内外的控制器中的参数，并尝试否定整行。

任何帮助将非常感激。

干杯

Answer 1

在您的代码中，isDisabled属性实际上应称为isEnabled，因为这就是您提供的结果。 因为当hasValidEmailAddress = true和hasEnteredMessage = true => isDisabled = true时，它将禁用您的按钮。

您可以创建另一个计算属性，执行reallyDisabled: Ember.computed.not('isDisabled')并在模板中使用它。

或者，您可以安装ember-truth-helpers插件（ https://github.com/jmurphyau/ember-truth-helpers ），然后在模板中执行disabled={{not isDisabled}}