RadioButtonList mit Ko

Brauche ich eine RadioButtonList mit einer Reihe von on/off-Entscheidungen, die ähnlich wie die CheckBoxList. Ich brauche es zu übersetzen, um ein on/off für jede option, aber Knockout behebt eine Gruppe von radio-buttons unten, um einen Wert aus. Vorschläge?

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

CITIZEN ' S ARREST. Dies ist eigentlich ein Missbrauch der radio-button Metapher. Nur ein radio-button der Gruppe sollte aktiv sein zu jeder Zeit -- die Entscheidungen, die sich gegenseitig ausschließen, wie ein Oldtimer-Auto-radio. Sie können nicht hören Sie mehr als einen Sender gleichzeitig, richtig? Was macht die GUI-Konventionen erfolgreich ist, ist Ihre Gewöhnlichkeit.
"CITIZEN' S ARREST", das ist lustig. Der radio button, UI ist nicht betroffen, nur die zugrunde liegenden Daten. Für den Benutzer, es sieht noch aus und funktioniert wie erwartet. Werfen Sie einen Blick auf das Beispiel jsFiddle auf die Antwort.

InformationsquelleAutor Homer | 2012-08-10

  1. 4

    Habe ich eine benutzerdefinierte Bindung. Sie könnte wahrscheinlich loswerden der for-Schleife, indem die zuvor ausgewählte Element irgendwo. Dann müssen Sie nur noch wählen Sie und deaktivieren Sie die 2 Elemente.

    Aktualisiert Beispiel: 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);                
            }
        });        
    }
};

    InformationsquelleAutor Homer

  2. 2

    Habe ich herausgefunden, dass der beste Weg, um match beide radio-buttons und Checkboxen zu setzen, ist die checked Bindung an ein array von ausgewählten Werten.

    Für diese zu arbeiten, obwohl jeder Optionsfeld/checkbox muss einen Wert, der ist, was ist dann abgeglichen Werte in dem array von ausgewählten Werten.

    Basierend auf Ihrer Geige kam ich mit dem folgenden HTML-Code:

    <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>

    Und hier ist das JavaScript, das macht es:

    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'));​

    Schließlich, hier ist ein link zu meiner Gabel fiddle, wo man sich anschauen kann dieser code in Aktion, zusammen mit einer überarbeiteten version der Optionen, die funktioniert in ähnlicher Weise:

    Lassen Sie mich wissen, wenn Sie Fragen haben.

    UPDATE:
    http://jsfiddle.net/jimmym715/h2e9j/

    danke, welchen link?
    tut mir Leid, dass, ich aktualisiert meine Antwort mit dem link, meinte ich hinzufügen, wenn ich geschrieben... wieder, lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben
    Es funktioniert nicht. "Nicht schreiben kann, einen Wert zu einer dependentObservable es sei denn Sie geben ein 'write' option."
    hmmm... ich konzentrierte mich zu sehr auf immer die richtigen Werte & nicht genug, auf weitere Abgrenzungen :-\ ich gab dies einem anderen zu laufen, aber das problem ist ich bin in eine, die inhärent Knockout selbst, speziell, wenn eine checkbox eine checkbox-Gruppe ist markiert/nicht markiert, Knockout ist das hinzufügen/entfernen das Element gebunden, das Kontrollkästchen an/aus-Knockout-eigene state-variable-array für die Verwaltung, die checkbox-group und das array verwaltet die ausgewählten Werte. Dies funktioniert gut mit Streichern, aber es scheint nicht gut zu spielen mit Objekten. Das sagte, ich habe etwas ähnliches vor.
    In meiner version, obwohl, ich hatte eine Liste von ausgewählten US-Bundesstaat als Kürzel ein observableArray, zusammen mit einer multi-select-Liste, die gebunden war an eine Liste von UsStateOption Objekte (Abk + name als Eigenschaften). Zusätzlich habe ich eine abhängige observable (ko.computed) für selectedStates, die hatte einen read - Funktion erstellt ein array von UsStateOption Objekte aus der Liste aller UsStateOptions (so dass die Objekte genau abgestimmt) und eine write - Funktion, Lesen Sie die ausgewählten Staaten im array Werte übergeben, die Funktion und aktualisiert die observable-array der Staat abbrs.

    InformationsquelleAutor jimmym715

Schreibe einen Kommentar