jak ustawić przycisk radiowy za pomocą knockout.js?

Question

Mam dwa przyciski radiowe.

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

ja wypełniania mojego modelu jak ten

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

Wartość pochodzi z DB doskonale i jej uzyskiwanie zaludnionych w self.IsGlobal jako prawda/fałsz. W oparciu o to prawda/fałsz, chcę ustawić przycisk radiowy sprawdzony.

Answer 1

W checked binding działa różnie dla przycisków radiowych:

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.

więc IsGlobal powinien posiadać ciąg i trzeba mieć ten sam ciąg jako wartość przyciskami radia:

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

W swoim modelu wyświetlania:

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

Jeśli chcesz zachować IsGlobal przechowywać wartość logiczną, czego potrzeba, aby utworzyć nową właściwość obliczoną dla przycisku radiowego, który robi konwersję:

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

Demo JSFIddle.

A przy okazji, jak Tomas zauważył, że twój systax wiązania jest uszkodzony w twojej próbce.

Answer 2

Po atrybucie data-bind powinien być znak równości zamiast dwukropka.

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

Answer 3

Wartość logiczna z DB jest Prawda/Fałsz

Zmieniłem w viewmodel:

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

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