按钮上的禁用似乎没有生效

Question

我今天才开始学习ember。（正在尝试做yoember.com）教程。请原谅我的新手问题。

我遇到了一些问题，我不确定自己做错了什么。

问题：

Disabled does not work (it always enables the button)

我在做什么：

I have a contact page which has email, message and submit button.

I want to disable the button initially (When there is no email, message)

这是我目前所做的：

contact.hbs:

<h1>Contact Page</h1>
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    {{input type="email" value=emailAddress class="form-control" placeholder="Please type your e-mail address." autofocus="autofocus"}}
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="text">Text</label>
    <textarea type="textarea" class="form-control" id="text" placeholder="Text" rows="4" cols="50" value={{message}}></textarea>
  </div>
  <button disabled={{isDisabled}} {{action 'submitButton'}} type="submit" class="btn btn-primary">Submit</button>
</form>

Contact.js

import Route from '@ember/routing/route';
import { match, not } from '@ember/object/computed';

export default Route.extend({
    emailAddress: '',
    message: '',
    isValid: match('emailAddress', /^.+@.+\..+$/),
    isDisabled: not('isValid'),

    actions: {
        submitButton () {
            alert(`Saving of the following email address is in progress:`);
        }
      }
});

问题：

1) 我做错了什么？为什么按钮总是启用？

2) value=emailAddress 与 value={{emailAddress}}

有什么区别

Answer 1

1) What am I doing wrong? Why is the button always enabled?

您不能将路由属性直接绑定到 ember 中的路由模板。因此，您必须使用路线的控制器。控制器就像路由一样是单例。所以这应该不是问题。

也不建议在路由上使用加载和错误状态以外的操作。它们也应该移至控制器。

路由应仅限于序列化和反序列化应用程序状态。如果您需要对每个路由进行代码拆分，这一点很重要。详情请参考discussion about the route actions RFC

由于您没有在 app/routes/contact.js 路线中使用任何路线特定的东西，您可以将其移动到 app/controllers/contact.js 并将其基础 class 从 @ember/routing/route 更改为@ember/controller.

2) What is the difference when I do value=emailAddress vs value={{emailAddress}}

作为一般规则，大括号内不能有大括号。所以 {{input value={{emailAdress}} placeholder="Please type your e-mail address."}} 将不是有效的语法。

除此之外的含义取决于上下文：

如果在花括号调用的组件内部使用 value=emailAddress，它引用值 emailAddress。这可能是由模板范围定义的局部变量（例如使用 let 帮助程序）或控制器/组件的属性。如果它是组件模板，甚至可以通过调用组件来传递属性。

为了避免混淆 Ember 引入了新的组件调用语法。它使用尖括号并允许在内部使用花括号来引用变量。在那种情况下 <Input value=emailAddress /> 将是无效的语法，因为该值必须是一个变量并因此具有花括号或字符串。所以在那种情况下只有 <Input value={{emailAddress}} /> 是有效的语法。也请注意，对于此调用语法，将 emailAddress 作为参数传递给组件的 @value={{emailAddress}} 与将 emailAddress 绑定到 [=49= 的 value={{emailAddress}} 之间存在差异] 属性 value 由 components 元素定义。

请查看 Ember Guides 以了解有关此不同组件调用语法的详细信息。

还有一些其他的上下文，但我从问题中猜测它是关于组件调用的，这个答案已经很长了。

按钮上的禁用似乎没有生效

Disabled on buttons does not seem to take effect

javascript

ember.js

ember-data

ember-cli