RadioButtonList avec knock-out

J'ai besoin d'un RadioButtonList avec un tas de choix similaire à la CheckBoxList. J'ai besoin de traduire pour un on/off pour chaque option, mais knock-out résout un groupe de boutons radio vers le bas à une valeur. Des Suggestions?

Exemple: http://jsfiddle.net/DPnBE/2/

L'ARRESTATION PAR DES CITOYENS. C'est en fait une mauvaise utilisation du bouton radio métaphore. Un seul bouton radio de la série doit être actif à la fois -- les choix sont mutuellement exclusifs, comme une voiture de collection à la radio. Vous ne pouvez pas écouter plus d'une station simultanément, à droite? Ce qui rend GUI conventions de réussir est de leur conformisme.
"L'ARRESTATION par des CITOYENS" que c'est drôle. Le bouton radio INTERFACE utilisateur n'est pas affecté, juste les données sous-jacentes. Pour l'utilisateur, c'est toujours et fonctionne comme prévu. Jetez un oeil à l'exemple jsFiddle sur la réponse.

OriginalL'auteur Homer | 2012-08-10

  1. 4

    J'ai fait une liaison personnalisée. Vous pourriez probablement obtenir débarrasser de la boucle par le stockage de l'élément précédemment sélectionné quelque part. Ensuite vous avez juste à sélectionner et désélectionner les 2 éléments.

    Mis À Jour Exemple: http://jsfiddle.net/DPnBE/5/

    ko.bindingHandlers.radioCheck = {
    init: function(element, valueAccessor) {
        //initalize checked value of element
        element.checked = valueAccessor()();

        //attach event to handle changes
        $(element).change(function(e) {
            var item = ko.dataFor(element);
            var items = ko.contextFor(element).$parent.items;
            for (var i = 0; i < items.length; i++) {
                //set selected() for all items
                //true for the checked element, false for the rest
                items[i].selected(items[i] == item);                
            }
        });        
    }
};

    OriginalL'auteur Homer

  2. 2

    J'ai trouvé que la meilleure façon de faire correspondre les deux boutons radio et cases à cocher est de définir la checked de liaison à un tableau de valeurs sélectionnées.

    Pour que cela fonctionne, cependant, chaque bouton radio/checkbox besoin d'une valeur, qui est alors ce qui est en correspondance avec les valeurs dans le tableau des valeurs sélectionnées.

    Basé sur votre violon je suis venu avec le code HTML suivant:

    <div id="two">
    <div data-bind="foreach: items">
        <label>
            <input name="items" 
                   type="radio" 
                   name="radioItems" 
                   data-bind="value: name, 
                              checked: $root.selectedItemNames" />
            <span data-bind="text:name"></span>
        </label><br/>
    </div><div data-bind="text: ko.toJSON($root)"></div>
</div>

    Et voici le code JavaScript qui permet de travailler:

    var viewModel2 = {
    "items": [
        {
            "name": "one",
            "selected": ko.observable(false)
        },
        {
            "name": "two",
            "selected": ko.observable(true)
        },
        {
            "name": "three",
            "selected": ko.observable(false)
        }
    ]
};

viewModel2.selectedItemNames = ko.computed(function(){
    var selectedNames = [];
    ko.utils.arrayForEach(viewModel2.items, function(item) {
        if(item.selected()){
            selectedNames.push(item.name);
        }
    });
    return selectedNames;
});

ko.applyBindings(viewModel2, document.getElementById('two'));​

    Enfin, voici un lien vers ma fourche de violon où vous pouvez regarder ce code dans l'action, avec une version remaniée de l'cases à cocher qui fonctionne de manière similaire:

    Laissez-moi savoir si vous avez des questions.

    Mise à JOUR:
    http://jsfiddle.net/jimmym715/h2e9j/

    merci, quel est le lien?
    désolé, j'ai mis à jour ma réponse avec le lien que je voulais ajouter quand j'ai posté... encore une fois, laissez-moi savoir si vous avez des questions
    Il ne fonctionne pas. "Ne peut pas écrire une valeur à une dependentObservable, sauf si vous spécifiez une "écriture " option".
    hmmm... je me concentrais trop sur les valeurs de & pas assez sur d'autres sélections :-\ j'ai donné tout cela une autre course, mais le problème je suis en cours d'exécution en est un qui est inhérente à élimination directe de lui-même, plus précisément, lorsqu'une case à cocher dans un groupe de cases à cocher est cochée/décochée, knock-out est l'ajout/retrait de l'élément lié à cette case pour/à partir de knock-out de l'état tableau de variables pour la gestion de ce groupe de cases à cocher, et ce tableau gère sélectionnés . Cela fonctionne bien avec les cordes, mais il ne semble pas bien jouer avec les objets. Cela dit, j'ai fait quelque chose de semblable auparavant.
    Dans ma version de travail, cependant, j'avais une liste de certains d'etat AMÉRICAIN abbrevations comme un observableArray, avec un multi-zone de liste à sélection qui a été liée à une liste de UsStateOption objets (abbr + nom en tant que propriétés). En outre, j'ai créé un dépendante observables (ko.computed) pour selectedStates, qui avait un read fonction qui créé un tableau de UsStateOption objets de la liste de tous les UsStateOptions (de sorte que les objets appariés exactement) et un write fonction que de lire à travers les états choisis dans le tableau de valeur transmise à la fonction et à la mise à jour de la observables tableau de l'état abbres.

    OriginalL'auteur jimmym715