Richtig/falsch an Optionsfelder in Knockout JS binden

In meinem Ansichtsmodell habe ich einen IsMale-Wert, der den Wert true oder false hat.

In meiner Benutzeroberfläche möchte ich es an die folgenden Optionsfelder binden:

<label>Male
   <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/>
</label>

Das Problem ist meiner Meinung nach checked erwartet einen String “true”https://stackoverflow.com/”false”. Meine Frage ist also, wie bekomme ich diese 2-Wege-Bindung mit dieser Benutzeroberfläche und diesem Modell?

Ich weiß, dass dies ein alter Thread ist, aber ich hatte das gleiche Problem und fand eine viel bessere Lösung, die wahrscheinlich zu Knockout hinzugefügt wurde, nachdem diese Frage offiziell beantwortet wurde, also überlasse ich es einfach Leuten mit demselben Problem.

Derzeit besteht keine Notwendigkeit für Extender, benutzerdefinierte Bindungshandler oder Berechnungen. Geben Sie einfach eine “checkedValue”-Option an, die anstelle des HTML-Attributs “value” verwendet wird, und damit können Sie jeden Javascript-Wert übergeben.

<input type="radio" name="a" data-bind="checked:IsChecked, checkedValue: true"/>
<input type="radio" name="a" data-bind="checked:IsChecked, checkedValue: false"/>

Oder:

<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 1"/>
<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 2"/>
<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 3"/>

Eine Möglichkeit ist die Verwendung von a beschreibbar berechnet beobachtbar.

In diesem Fall denke ich, dass es eine gute Option ist, das beschreibbare berechnete Observable zu einem “Sub-Observable” von Ihnen zu machen IsMale beobachtbar. Ihr Ansichtsmodell würde wie folgt aussehen:

var ViewModel = function() {
   this.IsMale = ko.observable(true);

   this.IsMale.ForEditing = ko.computed({
        read: function() {
            return this.IsMale().toString();  
        },
        write: function(newValue) {
             this.IsMale(newValue === "true");
        },
        owner: this        
    });          
};

Sie würden es in Ihrer Benutzeroberfläche wie folgt binden:

<label>Male
   <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale.ForEditing"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale.ForEditing"/>
</label>

Probe: http://jsfiddle.net/rniemeyer/Pjdse/

Das funktioniert bei mir:

http://jsfiddle.net/zrBuL/291/

<label>Male
   <input type="radio" name="IsMale" value="1" data-bind="checked:IsMale"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="0" data-bind="checked:IsMale"/>
</label>

ko.bindingHandlers['radiobuttonyesno'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        var stateHandler = function (property, allBindingsAccessor, key, value, checkIfDifferent) {
            if (!property || !ko.isObservable(property)) {
                var propWriters = allBindingsAccessor()['_ko_property_writers'];
                if (propWriters && propWriters[key])
                    propWriters[key](value);
            } else if (ko.isWriteableObservable(property) && (!checkIfDifferent || property.peek() !== value)) {
                property(value);
            }
        };

        var updateHandler = function () {
            var valueToWrite;

            if ((element.type == "radio") && (element.checked)) {
                valueToWrite = element.value;
            } else {
                return; // "radiobuttonyesno" binding only responds to selected radio buttons
            }

            valueToWrite = (valueToWrite === "True") ? true : false;

            var modelValue = valueAccessor(), unwrappedValue = ko.utils.unwrapObservable(modelValue); //can be true of false

            stateHandler(modelValue, allBindingsAccessor, 'checked', valueToWrite, true);
        };
        ko.utils.registerEventHandler(element, "click", updateHandler);

        // IE 6 won't allow radio buttons to be selected unless they have a name
        if ((element.type == "radio") && !element.name)
            ko.bindingHandlers['uniqueName']['init'](element, function () { return true });
    },
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        value = value ? "True" : "False";

        if (element.type == "radio") {
            element.checked = (element.value == value);
        }
    }
};

Verwenden Sie diesen Binder, anstatt dumme ko-berechnete Observables zu erstellen.

Beispiel:

<label>Male
        <input type="radio" name="IsMale" value="True" data-bind="radiobuttonyesno:IsMale"/>
     </label> 
     <label>Female
        <input type="radio" name="IsMale" value="False" data-bind="radiobuttonyesno:IsMale"/>
     </label>

Sobald Sie das herausgefunden haben Die anfängliche Übereinstimmung für das Optionsfeld möchte nur mit einer Zeichenfolge übereinstimmen und möchte den Wert auf einen String setzen, Es ist lediglich eine Frage der Konvertierung Ihres Anfangswerts in eine Zeichenfolge. Ich musste das mit Int-Werten bekämpfen.

Nachdem Sie Ihre Observables eingerichtet haben, konvertieren Sie den Wert in eine Zeichenfolge und KO wird von dort aus seine Magie ausführen. Wenn Sie eine Zuordnung mit einzelnen Zeilen vornehmen, führen Sie die Konvertierung in diesen Zeilen durch.

Im Beispielcode verwende ich Json, um das gesamte Modell in einem einzigen Befehl abzubilden. Lassen Sie dann Razor den Wert zwischen den Anführungszeichen für die Konvertierung einfügen.

script type="text/javascript">
    KoSetup.ViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
    KoSetup.ViewModel.ManifestEntered("@Model.ManifestEntered");       //Bool
    KoSetup.ViewModel.OrderStatusID("@Model.OrderStatusID");           //Int
</script>

Ich verwende während der Entwicklung ein “Dump it all to the screen” am Ende meiner Webseite.

<h4>Debug</h4>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

Hier sind die Datenwerte, Vor

"OrderStatusID": 6,
"ManifestEntered": true,

und, Nach

"OrderStatusID": "6",
"ManifestEntered": "True",

In meinem Projekt musste ich Bools nicht konvertieren, da ich ein Kontrollkästchen verwenden kann, das nicht die gleiche Frustration aufweist.

Warum nicht einfach wahr und falsch statt 1 und 0?

 <label>Male
    <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/>
 </label> 
 <label>Female
    <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/>
 </label>

Sie können auch eine verwenden Verlängerung Es ist also einfach, sie für weitere Observables wiederzuverwenden:

ko.extenders.boolForEditing = function (target, allowNull) {
    var result = ko.computed({
        read: function () {
            var current = target();
            var newValue = null;
            if (current === undefined || current === null || current === '') {
                if (!allowNull) {
                    newValue="false";
                }
            } else {
                newValue = current ? 'true' : 'false';
            }
            return newValue;
        },
        write: function (newValue) {
            var current = target();
            var valueToWrite = null;
            if (newValue === undefined || newValue === null || newValue === '') {
                if (!allowNull) {
                    valueToWrite = false;
                }
            } else {
                valueToWrite = newValue === 'true';
            }
            // only write if it changed
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    }).extend({
        notify: 'always'
    });

    result(target());

    return result;
};

Dann verwenden Sie es wie folgt:

this.IsMale.forEditing = this.IsMale.extend({boolForEditing: true});

Der Parameter, der bereitgestellt wird boolForEditing gibt an, ob der Wert null sein darf.

Sehen http://jsfiddle.net/G8qs9/1/