按钮内的Aurelia复选框

我试图在按钮内设置一个复选框，单击复选框或按钮都会切换复选框以及视图模型中绑定到该复选框的布尔值

app.html：

<template>
  <h1>${heading}</h1>
  <button type="button" click.trigger="toggleIsChecked()">
    <input type="checkbox" checked.bind="isChecked"> ${isChecked}
  </button>
</template>

结果是，当我点击复选框外的按钮时，一切正常。但是，当我单击该复选框时，视图模型中的布尔值会更改，但该复选框不会被选中或取消选中。这可能是什么原因造成的

我尝试了不同的方法，但都产生了相似的结果。在调试过程中，我注意到复选框被选中，但Aurelia框架中的某些内容几乎立即将其删除。事件处理似乎工作不正常

---

编辑：我做了一个要点，所以你可以自己尝试：

删除检查的不是Aurelia框架。当您单击复选框时，isChecked会自动设置为true，然后触发toggleIsChecked并将isChecked设置为false。单击复选框时，isChecked会设置两次。要解决此问题，如果目标是复选框，则不必设置isChecked。大概是这样的：

JS

HTML

---

移除检查的不是Aurelia框架。当您单击复选框时，isChecked会自动设置为true，然后触发toggleIsChecked并将isChecked设置为false。单击复选框时，isChecked会设置两次。要解决此问题，如果目标是复选框，则不必设置isChecked。大概是这样的：

JS

HTML

---

与Fabio Luz的解释相同&将做同样的事情，但是不必检查事件目标标记名，您可以使用自绑定行为，如下所示

<template>
  <require from='./self'></require>
  <h1>${heading}</h1>
  <button type="button" click.delegate="toggleIsChecked() & self">
    <input type="checkbox" checked.bind="isChecked"> ${isChecked}
  </button>
</template>

注意：self刚刚被合并，但尚未发布。我在此要点中包含了代码：

---

您可以在此处阅读有关PR的更多信息：

与Fabio Luz的解释相同&我们将做同样的事情，但不必检查事件目标标记名，您可以使用自绑定行为，如下所示

<template>
  <require from='./self'></require>
  <h1>${heading}</h1>
  <button type="button" click.delegate="toggleIsChecked() & self">
    <input type="checkbox" checked.bind="isChecked"> ${isChecked}
  </button>
</template>

注意：self刚刚被合并，但尚未发布。我在此要点中包含了代码：

---

你可以在这里阅读更多关于公共关系的信息：

奥雷莉亚·吉特聊天室的善良的人们为我提供了答案。我的要点是没有调用默认事件处理程序。原因是Aurelia会自动调用event.preventDefault函数。为了调用默认事件处理程序，我必须从自己的事件处理程序返回true。这里有一个工作要点来证明它是如何工作的：

---

谢谢大家的回答。我决定自己回答这个问题，因为我从Gitter聊天中得到了答案，但荣誉属于令人敬畏的Aurelia社区，尤其是@CasiOo。

Aurelia Gitter聊天中善良的人们为我提供了答案。我的要点是没有调用默认事件处理程序。原因是Aurelia会自动调用event.preventDefault函数。为了调用默认事件处理程序，我必须从自己的事件处理程序返回true。这里有一个工作要点来证明它是如何工作的：

---

谢谢大家的回答。我决定自己回答这个问题，因为我从Gitter聊天中得到了答案，但是这个荣誉属于很棒的Aurelia社区，尤其是@CasiOo。

IIRC，在复选框上，你应该使用单向绑定：checked.bind=isChecked应该选中。单向=isChecked；另外，您可能希望使用click.delegate，而不是触发器。另外，请看一下这个问题：您好，谢谢您的提示，但是切换到单向绑定并没有解决此问题，click.delegate也没有解决此问题。我已经阅读了你之前链接的SO问题，并尝试了不同的建议，但没有成功。事实上，对于您链接的问题，公认的答案建议使用双向绑定而不是单向绑定。请使用标签。这就是糟糕的HTML。我承认它不漂亮，也不是很好的HTML，但我问的原因是为了更好地理解Aurelia中事件是如何工作的。再次感谢所有的评论！IIRC，在复选框上，您应该使用单向绑定：checked.bind=isChecked应该选中。单向=isChecked；另外，您可能希望使用click.delegate，而不是触发器。另外，请看一下这个问题：您好，谢谢您的提示，但是切换到单向绑定并没有解决此问题，click.delegate也没有解决此问题。我已经阅读了你之前链接的SO问题，并尝试了不同的建议，但没有成功。事实上，对于您链接的问题，公认的答案建议使用双向绑定而不是单向绑定。请使用标签。这就是糟糕的HTML。我承认它不漂亮，也不是很好的HTML，但我问的原因是为了更好地理解Aurelia中事件是如何工作的。再次感谢所有的评论！事实并非如此。如果是，则视图模型中的值也不会更改或更改两次

---

实际上。此处发生的情况是，从未调用默认事件处理程序，因此从未选中/取消选中复选框。我将发布一个工作要点，并解释如何做到这一点。这不是正在发生的事情。如果是，那么视图模型中的值也不会更改，或者实际上不会更改两次。此处发生的情况是，从未调用默认事件处理程序，因此从未选中/取消选中复选框。我会发布一个工作要点，并解释如何做到这一点。谢谢你的提示。我以前从未听说过这种自我约束行为。听起来很有用。虽然这不是导致我的问题的原因，实际上我希望事件传播到复选框的祖先，以便调用按钮单击事件侦听器。在正确阅读您的答案后，我注意到它与返回true一样有效。所以有两种方法可以让它发挥作用。我会将此标记为正确答案，但我希望每个人都注意到，从事件处理程序返回true也可以修复它。我提出了以下适用于更多情况（包括表行）的方法。单击.delegate=$event.target.type！='复选框“？checkbox.checked=！checkbox.checked:true复选框是输入字段：ref=checkbox的参考。感谢您的提示。我以前从未听说过这种自我约束行为。听起来很有用。虽然这不是导致我的问题的原因，实际上我希望事件传播到复选框的祖先，以便调用按钮单击事件侦听器。在正确阅读您的答案后，我注意到它与返回true一样有效。所以有两种方法可以让它发挥作用。我会将此标记为正确答案，但我希望每个人都注意到，从事件处理程序返回true也可以修复它。我提出了以下适用于更多情况（包括表行）的方法。单击.delegate=$event.target.type！='复选框“？checkbox.checked=！checkbox.checked:true复选框是对输入字段的引用：ref=checkbox

<button type="button" click.trigger="toggleIsChecked($event)">
  <input type="checkbox" checked.bind="isChecked"> ${isChecked}
</button>

<template>
  <require from='./self'></require>
  <h1>${heading}</h1>
  <button type="button" click.delegate="toggleIsChecked() & self">
    <input type="checkbox" checked.bind="isChecked"> ${isChecked}
  </button>
</template>

toggleIsChecked(event) {
  if (event.target === this.button) {
    // Do your thing
  }
}