Comment rendre un tableau sous forme de liste de boutons radio?

Je voudrais parcourir un tableau que je définis dans mon Javascript et afficher une liste de boutons radio. Mon code qui ne fonctionne pas actuellement, et il est comme suit (également sur jsfiddle):

<div data-bind="foreach: options" >
    <div>
        <input type="radio" name="optionsGroup" data-bind="checked: selected" />
        <span data-bind="text: label"></span>
     </div>    
</div>
var optionsList = [
    {"value": "a","label": "apple"},
    {"value": "b","label": "banana"},
    {"value": "c","label": "carrot"}
];
function viewModel() {
    var self = this;
    self.options = optionsList;
    self.selected = ko.observable("a");
    self.selected.subscribe(function(newValue) {
        alert("new value is " + newValue);
    });
}
ko.applyBindings(new viewModel());

Si mon tableau est une partie de l'html, puis il fonctionne très bien, voir ce (ou jsfiddle):

<div>
    <input type="radio" name="optionsGroup" value="a" data-bind="checked: selected"     />Apple
</div>
<div>
    <input type="radio" name="optionsGroup" value="b" data-bind="checked: selected" />Banana
</div>
<div>
     <input type="radio" name="optionsGroup" value="c" data-bind="checked: selected" />Carrot
</div>
<div data-bind="text: selected">
</div>
function viewModel() {
    var self = this;
    self.selected = ko.observable("a");
    self.selected.subscribe(function(newValue) {
        alert("new value is " + newValue);
    });
}    
ko.applyBindings(new viewModel());

J'ai eu ce travail, par la génération de l'ensemble de l'html dans mon javascript et avoir ce travail à l'aide de cases à cocher, mais je suis perplexe, la génération d'un groupe de composants radiobutton à l'aide de la boucle foreach itérateur.

Quelqu'un a obtenu un exemple comme mon premier travail?

source d'informationauteur user759608

  1. 1

    Votre code donne cette erreur:

    Message: ReferenceError: sélectionné n'est pas défini;

    Liaisons valeur: vérifié: sélectionné

    Vous avez défini selected sur le modèle de vue, mais vous faites référence à l'intérieur de foreach donc Knockout.js est à la recherche pour les options.

    Changement:

    <div><input type="radio" name="optionsGroup" data-bind="checked: selected" />

    :

    <div><input type="radio" name="optionsGroup" data-bind="checked: $root.selected" />

    $root.selected va chercher la selected de propriété sur le modèle de vue.

    ICI est le code modifié.

    Pour plus d'informations à propos de la pseudo-variables (comme $root) voir 3. L'accès à la liaison avec le parent contextes.

  2. 1

    Être en mesure d'avoir la totalité de l'objet, il est préférable d'utiliser checkedValue au lieu de attr: {valeur} comme ça :

    Fruits
<div data-bind="foreach: options" >
    <div><input type="radio" name="optionsGroup" data-bind="checkedValue: $data, checked: $root.selected" />
    <span data-bind="text: label"></span></div>    
</div>
  3. 0

    Vous code fonctionne. Il suffit d'inclure knockout.js dans votre jsfiddle et document "onDomready": http://screencast.com/t/DmTSgCoEUsxC