come impostare il pulsante di opzione controllato usando knockout.js?

Question

Ho due pulsanti di opzione.

<td> 
    <div style="display: inline; margin-right: 10px"> 
     <input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal/>US 
    </div> 
    <div style="display: inline"> 
     <input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal"/>Global 
    </div> 
</td> 

sto che popolano il mio modello come questo

QuestionnaireModel = function (data) { 
    self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal : false); 
} 

Il valore proviene da DB perfettamente e la sua sempre più popolata in self.IsGlobal come vero/falso. Sulla base di questo vero/falso, voglio impostare il mio pulsante radio controllato.

Answer 1

I checked binding opere in modo diverso per i pulsanti di opzione:

For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute. So, your parameter value should be a string.

Così il vostro IsGlobal dovrebbe tenere una corda ed è necessario avere la stessa stringa come il valore dei pulsanti di opzione:

<input type="radio" name="USGlobalUser" 
     data-bind="checked: IsGlobalCheckbox" value="false" />US 
<input type="radio" name="USGlobalUser" 
     data-bind="checked: IsGlobalCheckbox" value="true" />Global 

E nel tuo modello:

self.IsGlobal = ko.observable(data ? data.IsGlobal + "" : "false"); 

Se si desidera mantenere la IsGlobal per memorizzare un valore booleano è necessario creare una nuova proprietà calcolato per il pulsante di opzione che fa la conversione:

self.IsGlobalCheckbox = ko.computed({ 
    read: function() { 
     return self.IsGlobal() + ""; 
    }, 
    write: function (v) { 
     if (v == "true") self.IsGlobal(true) 
     else self.IsGlobal(false) 
    } 
}); 

Demo JSFIddle.

E tra l'altro come Tomas ha notato che la tua systax legante è rotta nel tuo campione.

Answer 2

Dopo l'attributo data-bind deve essere il segno di uguaglianza anziché i due punti.

<input type="radio" name="USGlobalUser" data-bind="checked:IsGlobal"/> 

Answer 3

valore dal DB è booleano Vero/Falso

ho cambiato in viewmodel:

self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal.toString() : ""); 

e in cshtml:

<td> 
    <div style="display: inline; margin-right: 10px"> 
     <input type="radio" name="USGlobalUser" value="false" data-bind="checked:IsGlobal()" />US       
    </div> 
    <div style="display: inline"> 
     <input type="radio" name="USGlobalUser" value="true" data-bind="checked:IsGlobal()" />Global 
    </div> 
</td>