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

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?

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

除了在路由上加载和错误状态之外，不建议使用其他操作。它们也应该移至 Controller 。

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

由于您没有在 app/routes/contact.js 中使用任何特定于路线的东西|路线，你可以把那个移到app/controllers/contact.js并将其基类从 @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 助手)或 Controller /组件的属性。如果它是组件模板，甚至可以通过调用组件来传递属性。

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

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

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