奥雷利亚的动态无线电/复选框解决方案



我在这里有一个要点来证明我的问题:

https://gist.run/?id=e2ccd5925e383f2fc36ad277c31bcf23

复选框版本工作正常,如果您删除复选标记,它会正确更新模型,但如果您更改所选单选按钮,它将保留删除其选择的收音机上的真实值。如果我删除model.bind="true"值,它将写入"on"而不是 true。我确实想要真/假,而不是开/关。

我希望对象将其属性更新为真或假,具体取决于是否动态选择它。在我的方案中,我不知道需要选择多少个单选按钮或复选框。我只知道,在它不是集合的情况下,我只想要一个,而在它是集合的情况下,我希望选择一个未知的数字。

就像另一个答案提到的那样 - <input type="checkbox">行为与<input type="radio">不同。

我已经分叉了您的要点并进行以下更改,以使带有单选按钮的方案在Aurelia中工作:

1)在params集合中的第一个对象中添加了一个名为selectedChanged的函数(它不必在那里,可以在viewmodel类上,也许是更好的位置)。它负责处理单选按钮组中的选择更改,具体而言,它将迭代options集合(第二个参数),并将selected属性设置为true id与函数的第一个参数匹配的选项,并在所有其他选项上设置为 false。

2)input上有一个名为change的事件,我将其委托给上面提到的一个名为selectedChanged的函数,将option.id值和options作为参数传递。

https://gist.run/?id=5f38414fde799dfc145fc1291d9f2fd3&sha=f12283b08bfb45e77b8280d46a3709b6ccb82768

我认为您想要实现的目标(打开/关闭单个值)无法通过无线电实现,因为它的工作方式(从集合中选择单个值)与复选框(打开/关闭单个值)(MDN 参考)不同。因此,如果你真的想拥有类似无线电的外观,带有复选框行为,请考虑使用一些 CSS 和额外的 DOM 元素来使其看起来像这样,并且表现得像这样。

最新更新