当在父级上设置操作时，复选框样式未正确切换，更新的数据从父级发送到子级

Question

我有一个带有复选框的卡片组件，已选中的状态是从父项传递到该组件的。复选框被隐藏，标签的样式看起来像一个复选框。包含复选框的整个卡片都有操作处理程序。当我直接单击复选框标签或卡片时，它会正确切换，但是当使用 Space 时，操作会正确触发，但复选框不会切换。我看到未在 DOM 中为隐藏复选框设置选中的属性，因此未呈现选中复选框的样式。我试图在卡片组件上检查一个计算的属性以在更新检查值时强制重新渲染，但没有成功。

<!-- parent -->
{{#each userList as |user|}}
<li {{action "selectCard" user}}>
  {{member-card
     name=user.name
     checkboxId=user.checkboxId
     checked=user.checked
  }}
</li>
<!-- child -->
<div>
  <input
    type="checkbox"
    id={{checkboxId}}
    checked={{checked}}
  />
  <label for={{checkboxId}} class="result-card__name-label">
   {{name}}
  </label>
</div>

在检查时我发现检查的 DOM 属性设置不正确。当我尝试时：

<!-- child -->
{{#if checked}}
<input
    type="checkbox"
    id={{checkboxId}}
    checked
  />
{{else}}
<input
    type="checkbox"
    id={{checkboxId}} />
{{/if}}

这似乎给出了我想要的结果。一种可行的解决方案是，如果我也在复选框标签上设置相同的操作处理程序，并防止事件在单击时冒泡。但这似乎不是一个优雅的解决方案。想了解为什么复选框无法正确重新呈现。

我假设当我点击卡片时选中的属性会更新（我使用 ember 检查器验证了这一点）我假设选中的属性会被选中在复选框上。但出于某种原因，这不是它的工作方式。我结束了，但在标签上使用了阻止默认值，以阻止事件从它传播到复选框以阻止它再次触发事件。

Ember版本：3.8

Answer 1

您展示的应该有效。这是一个演示它的 Twiddle：https://ember-twiddle.com/0631193dc09a3646ca9e9a1efe351607?numColumns=2&openFiles=controllers.application.js%2Ctemplates.application.hbs

您的问题可能出在其他地方。

如何在 user 对象上设置 checked 属性？ user 是 EmberObject 的实例还是 POJO？

如果它是 POJO 而您正在执行 user.checked = true，则模板不会更新。 Ember 无法知道属性已经改变。

使它成为EmberObject的实例并使用user.set()设置它。

或者，如果您使用 Ember Octane（推荐），user 可以是简单 class 的一个实例，并且您可以使用 @tracked checked class 属性上的装饰器。然后你可以使用 user.checked = true 来改变复选框状态。

当在父级上设置操作时，复选框样式未正确切换，更新的数据从父级发送到子级

Checkbox style not toggled correctly when action set on parent, updated data is sent from parent to child

html

javascript

checkbox

ember.js