javascript - Aurelia中的disabled.bind无法正常工作

Question

我有一个表单，在表单中有一个自定义组件，其中包含某些字段。表格末尾有一个按钮。该按钮有...

disabled.bind="!(formValid && subFromValid)"

现在，在自定义组件上，我有一个变量“subFormValid”的双向绑定(bind)。 subFormValid 仅当自定义组件中的验证有效时才有效。因此，子表单验证一些字段并设置 subFormValid = true。即使“formValid”为 false，该按钮现在也已启用。我不明白为什么，这让我发疯。我什至向变量添加了一个 get 函数并在其中添加控制台日志，就像这样......

<button type="submit" disabled.bind="wholeFormValid">Submit</button>

然后在我的类里面我...

get wholeFormValid() {
  console.log("validating form");
  console.log(!(this.formValid && this.subFormValid));
  return !(formValid && subFormValid);
}

我在控制台中看到了一百万多行，但我能够一直观看它。当我第一次加载页面时，它正在记录...

validating form

true

然后我填写了子表单，并检查了控制台。控制台显示...

validating form

true

但是，该按钮现已启用。

出于某种原因，每当 subFormValid = true 时，无论 formValid 如何，按钮都会启用。

有谁知道如何禁用按钮，除非满足两个条件？只要 subFormValid 为 true，我所做的一切都会启用该按钮，即使控制台仍在记录“true”，这应该会禁用该按钮。

只是为了提供帮助，如果有人想知道为什么表单中有子表单，那是因为需要使用 Smarty Streets 验证地址，并且我们希望能够在其他地方重用表单的该部分，所以我为地址部分创建了一个自定义组件，用于验证输入并验证地址。它的调用形式如下...

<require from="components/smarty-streets"></require>

然后像这样使用...

<smarty-streets form-is-validated.two-way="subFormValid"></smarty-streets>

然后在聪明的街道上我...

@bindable formIsValidated;

我根据组件中的验证将值从 true 更改为 false，反之亦然。

Answer 1

我尝试使用以下方法重现您的问题:

<input type="checkbox" checked.bind="formValid"/>
<input type="checkbox" checked.bind="subFormValid"/>
<button disabled.bind="wholeFormValid">Submit</button>

我注意到在您的函数中，您在 console.log 行中使用了 this.formValid ，但在返回行中您使用了 formValid ，而没有 this。这似乎是一个与实际绑定(bind)变量不同的变量。我认为你的函数应该是这样的:

get wholeFormValid() {
  console.log("validating form");
  console.log(!(this.formValid && this.subFormValid));
  return !(this.formValid && this.subFormValid);
}

编辑:我还强烈建议在 get() 上使用 @compulatedFrom 装饰器来减少 aurelia 的计算量。您可以阅读更多相关内容 here .