【问题标题】:Dynamic radio/checkbox solution in AureliaAurelia 中的动态单选/复选框解决方案
【发布时间】:2019-06-06 20:22:42
【问题描述】:
我有一个要点来证明我的问题:
https://gist.run/?id=e2ccd5925e383f2fc36ad277c31bcf23
复选框版本工作正常,如果您删除一个复选,它会正确更新模型,但如果您更改选定的单选按钮,它将保留已删除选择的单选按钮上的真实值。如果我删除model.bind="true" 值,它将写入“on”而不是 true。我确实想要真/假,而不是开/关。
我希望对象根据是否选择动态更新其属性为真或假。在我的场景中,我不知道需要选择多少单选按钮或复选框。我只知道在不是集合的情况下,我只想要一个,在它是集合的情况下,我想要选择一个未知数。
【问题讨论】:
标签:
checkbox
binding
radio-button
aurelia
【解决方案1】:
就像其他答案提到的一样 - <input type="checkbox"> 的行为与 <input type="radio"> 不同。
我已经分叉了您的要点并进行了以下更改,以使您的单选按钮方案在 aurelia 中工作:
1) 为您的params 集合中的第一个对象添加了一个名为selectedChanged 的函数(它不必在那里,可以在viewmodel 类上,也许是一个更好的地方)。它负责处理单选按钮组中的选择更改,具体而言,它将遍历options(第二个参数)的集合,并将id与第一个参数匹配的选项上的selected属性设置为true的函数,并在所有其他选项上为 false。
2) input 上有一个名为change 的事件,我将它委托给上面提到的一个名为selectedChanged 的函数,将option.id 值和options 作为参数传递。
https://gist.run/?id=5f38414fde799dfc145fc1291d9f2fd3&sha=f12283b08bfb45e77b8280d46a3709b6ccb82768
【解决方案2】:
我认为您想要实现的目标(打开/关闭单个值)无法通过收音机实现,因为它的工作方式(从一组中选择一个值)与复选框不同(打开单个值) /关闭)(MDN reference)。因此,如果您真的想要具有类似于收音机的外观,并具有复选框行为,请考虑使用一些 CSS 和额外的 DOM 元素使其看起来像这样,并且表现得像这样。