时间戳

首页 > 解决方案 > ember-composable-helpers 复选框未选中

ember.js - ember-composable-helpers 复选框未选中

问题描述

我在 Ember 中使用可组合的助手。当我单击父复选框时，所有子复选框都会选中和取消选中，但父复选框从不显示复选标记。我在这里想念什么？

家长：<input type="checkbox" checked={{allSelected}} {{action (toggle "allSelected" this)}}>

孩子们：<input type="checkbox" checked={{allSelected}}>

标签： ember.js

解决方案

以这种风格使用时，{{action}}助手不能阻止点击动作冒泡（通过提供函数关闭）。我能想到的几种方法可以在旧的 ember 版本中解决这个问题。（使用 ember octane，您只需使用{{on}}不受相同限制的助手）。

  1. 在组件的支持 JS 中的操作中执行切换并传递{{action "toggle"}}以停止事件的冒泡。

  2. 用 . 拆分您的输入{{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"}}>

如果这不起作用，您可能需要尝试内置输入组件，因为它可以消除事件的一些粗糙边缘。

推荐阅读