Pourquoi mes boutons radio Knockout échouent-ils lorsqu'ils se trouvent dans un autre élément avec une liaison par clic ?

Question

J'ai une liste de boutons radio. Je veux que les clics sur les <li> leur pour cocher également le bouton radio. Tout cela fonctionne jusqu'à ce que je mette un name sur les éléments radio. Ensuite, mon code ne fonctionne plus.

Voici à quoi ressemble mon code :

<ul data-bind="foreach: rows">
    <li data-bind="click: function() { $parent.val($data); }">
        <input type="radio" name="my_radio" data-bind="value: $data, checked: $parent.val" />
        <label data-bind="text: $data"></label>
    </li>
</ul>

Voici deux cas de test.

Veillez à cliquer à la fois sur le bouton radio et sur la ligne.

Travailler : http://jsfiddle.net/Dihedral/HJGxX/2/

Ne fonctionne pas : http://jsfiddle.net/Dihedral/HJGxX/3/

Dans le second cas, en cliquant uniquement sur la radio, vous verrez que l'observable val() est mis à jour, mais pas l'interface utilisateur. Quelqu'un sait-il ce qui se passe ici, ou voit-il une solution de contournement ?

Answer 1

Le clic n'atteint pas le bouton radio car knockoutjs renvoie false depuis le gestionnaire de clics, empêchant l'action par défaut de se produire (voir : note 3 ). Il suffit de renvoyer true depuis le gestionnaire de clics ( http://jsfiddle.net/HJGxX/4/ ) :

<li data-bind="click: function() { $parent.val($data); return true; }">

Answer 2

Comme les attributs de nom ont tous la même valeur, tous ces boutons radio font partie du même ensemble et vous ne pouvez en sélectionner qu'un seul à la fois.

En savoir plus sur l'attribut nom des boutons radio sur www.W3.org