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

Question

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

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

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

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

那么在我的课堂上我有...

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

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

验证表单

是的

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

验证表单

是的

然而，该按钮现在已启用。

由于某种原因，只要 subFormValid = true，按钮就会启用，而不管 formValid。

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

只是为了帮忙，如果有人想知道为什么表单中有一个子表单，那是因为地址需要使用 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。这似乎是与您的实际绑定变量不同的变量。我认为你的函数应该是这样的：

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

编辑：我还强烈建议在 get() 上使用 @computedFrom 装饰器来减少 aurelia 的计算量。你可以阅读更多关于here的信息。