Aurelia复选框内的按钮

我想要一个按钮内的复选框，并点击复选框或按钮应切换复选框和从视图模型绑定到它的布尔值。Aurelia复选框内的按钮

app.html：

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

app.ts：

export class App { 
    isChecked: boolean; 

    toggleIsChecked() { 
     this.isChecked = !this.isChecked; 
    } 
}

会发生什么事是，当我按一下按钮（复选框以外）一切正常。但是当我点击复选框时，视图模型中的布尔值发生变化，但复选框未被选中或未选中。什么可能导致这个？

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

编辑：我做了一个要点，所以你可以尝试一下自己：https://gist.run/?id=4a7b2c11db33bdb37213eb4ea1b5b2b0

来源

2016-12-27 mattipet

IIRC，在复选框上，你应该使用单向绑定：'checked.bind =“isChecked”'应该是'checked.one-way =“isChecked”';另外，你可能想使用一个click.delegate，而不是触发器。 –

另外，看看这个SO问题：http://stackoverflow.com/questions/35296915 –

嗨，谢谢你的提示，但切换到单向绑定并没有解决它，也没有click.delegate。我已经阅读过你曾经链接过的SO问题，并尝试了不同的建议，但没有成功。事实上，你所接受问题的接受答案建议使用双向绑定而不是单向绑定。 – mattipet

与法比奥·卢斯&会做同样的事情，但是，不是检查活动对象的标记名称相同的解释，您可以使用self绑定行为，像这样

<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约束力的行为在这里所做的就是确保toggleIsChecked只有火灾时，你点击按钮本身，而不是它的后代，同样用这个代码块：

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

注：self刚刚合并，但尚未发布。我已经包含在这个要点代码：https://gist.run/?id=5e66dfd996d852344a524010ae82a936

你可以阅读更多关于PR这里：https://github.com/aurelia/templating-resources/pull/263

来源

2016-12-28 01:42:15 bigopon

感谢您的提示。我以前没有听说过自我约束行为。听起来很有用。虽然这不是导致我的问题的原因，但实际上我想要发生的事情是将事件传播到复选框的祖先，以便调用按钮单击事件侦听器。 – mattipet

正确阅读您的答案后，我注意到它的工作原理以及返回true。所以有两种方法可以实现这一点。我会将此标记为正确的答案，但我希望每个人都注意，从事件处理程序返回true也会修复它。 – mattipet

首先，我听说过“自我”，很有意思，但只有当复选框是唯一的/直接的子元素时才有效。我想出了以下适用于更多案例（包括表格行）的以下内容。（checkbox是输入字段的引用：ref =“checkbox”）。“click.delegate =”（$ event.target.type！=='checkbox'）？checkbox.checked =！checkbox.checked：true“ – Matt

这不是奥里利亚框架是“删除”的检查。正在发生的事情是，当你点击复选框，在isChecked自动设置为true，然后toggleIsChecked()被触发，isChecked设置为false（isChecked设置两次当您单击复选框）。要解决这个问题，如果目标是复选框，您不得设置isChecked。事情是这样的：

toggleIsChecked(event) { 
    if (event.target.tagName === 'INPUT') { 
    return true; //checkbox has been clicked, do nothing! 
    } 
    this.isChecked = !this.isChecked; 
}

HTML

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

来源

2016-12-27 20:45:44

这并非如此。如果是，那么视图模型中的值也不会改变（或实际改变两次）。这里发生的事情是，默认的事件处理程序永远不会被调用，因此复选框永远不会被选中/取消选中。我将发布一个工作要点，并解释如何完成这项工作。 – mattipet

善良的人在Aurelia路上聊天的Gitter一个答案给我提供。我的要点是，默认的事件处理程序没有被调用。原因是Aurelia会自动调用event.preventDefault（）函数。为了调用默认的事件处理程序，我必须从我自己的事件处理程序返回true。下面是一个工作要点，证明它的工作原理：https://gist.run/?id=3cb545572065cffd737f98788a4105a1

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

来源

2016-12-28 08:52:21 mattipet

Aurelia复选框内的按钮

回答

相关问题