时间戳

首页 > 解决方案 > 在父级上设置操作时，复选框样式未正确切换，更新的数据从父级发送到子级

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

问题描述

我有一个带有复选框的卡片组件，检查状态从父级传递到该组件。复选框被隐藏，标签的样式看起来像一个复选框。包含复选框的整张卡片都有动作处理程序。当我直接单击复选框标签或卡片时，它会正确切换，但是在使用 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}}

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

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

灰烬版本：3.8

标签： javascripthtmlcheckboxember.js

解决方案

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

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

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

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

使其成为一个实例EmberObject并用于user.set()设置它。

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

推荐阅读