我在Ember中使用了可组合的助手。当我点击父复选框时，所有子复选框都会选中和取消选中，但父复选框从不显示复选标记。我在这里遗漏了什么？父项：<input type="checkbox" checked={{allSelected}} {{action (toggle "allSelected" this)}}>子项：<input type="checkbox" checked={{allSelected}}>
<input type="checkbox" checked={{allSelected}} {{action (toggle "allSelected" this)}}>
<input type="checkbox" checked={{allSelected}}>
pftdvrlh1#
{{action}}助手can not prevent the click action from bubbling up当使用这种风格（通过提供一个函数来关闭）。我可以想到一些方法来解决这个问题，在旧的ember版本。（与ember辛烷你只需要使用{{on}}助手，它不会遭受同样的限制）。1.在组件的支持JS中的操作中执行切换，并传递{{action "toggle"}}以停止事件的冒泡。1.使用{{if}}拆分输入。
{{action}}
{{on}}
{{action "toggle"}}
{{if}}
{{if this.allSelected}} <input checked> {{else}} <input> {{/if}}
我不是100%确定这里发生了什么（可能是浏览器重复应用了你的点击）。我想切换到一个更新的ember操作处理语法可能会解决这个问题。
<input type="checkbox" checked={{this.allSelected}} {{on "click" (toggle "allSelected" this)}}>
或者在旧版本的ember上（在{{on}}引入之前）
<input type="checkbox" checked={{this.allSelected}} {{action (toggle "allSelected" this) on="click"}}>
如果这不起作用，您可能希望给予内置的输入组件，因为它可以消除事件的一些粗糙边缘。
1条答案
按热度按时间pftdvrlh1#
{{action}}助手can not prevent the click action from bubbling up当使用这种风格（通过提供一个函数来关闭）。我可以想到一些方法来解决这个问题，在旧的ember版本。（与ember辛烷你只需要使用{{on}}助手，它不会遭受同样的限制）。1.在组件的支持JS中的操作中执行切换，并传递
{{action "toggle"}}以停止事件的冒泡。1.使用
{{if}}拆分输入。我不是100%确定这里发生了什么（可能是浏览器重复应用了你的点击）。我想切换到一个更新的ember操作处理语法可能会解决这个问题。
或者在旧版本的ember上（在
{{on}}引入之前）如果这不起作用，您可能希望给予内置的输入组件，因为它可以消除事件的一些粗糙边缘。