nokaut nie ustawia początkowej wartości prawdziwej na przycisku radiowym.

Question

Jednokierunkowe wiązanie dla nazw + pole wyboru działa dobrze, ale początkowo nie działa dla przycisku radiowego employeeTypeA, chociaż jego wartość jest prawdziwa w viewmodelu, który html pokazuje przycisk radiowy nie jest ustawiony, dlaczego?

<script type="text/javascript"> 

     $(function() 
     { 
      var PersonViewModel = function() 
      { 
       this.firstName = ko.observable('Lisa'); 
       this.lastName = ko.observable('T'); 
       this.isCustomer = ko.observable(true); 
       this.employeeTypeA = ko.observable(true); 
       this.employeeTypeB = ko.observable(false); 
      }; 

      var personViewModel = new PersonViewModel(); 
      ko.applyBindings(personViewModel, $('data').get(0)); 
     }); 
    </script> 

    <div id="data"> 
     <span data-bind="text: firstName"></span> 
     <span data-bind="text: lastName"></span> 
     <input type="checkbox" data-bind="checked: isCustomer" title="Is a customer" /> 
     <input name="x" type="radio" data-bind="checked: employeeTypeA" title="Employee type A" /> 
     <input name="x" type="radio" data-bind="checked: employeeTypeB" title="Employee type B" /> 
    </div> 

Answer 1

W checked wiążące działa różnie dla przycisków radiowych, począwszy od dokumentacji:

dla przycisków radiowych, KO ustawi element należy sprawdzić, wtedy i tylko wtedy, gdy wartość parametru jest równa węzła przycisku radiowego Atrybut value.

Więc trzeba zmienić PersonViewModel do czegoś takiego:

var PersonViewModel = function() 
{ 
    this.firstName = ko.observable('Lisa'); 
    this.lastName = ko.observable('T'); 
    this.isCustomer = ko.observable(true); 
    this.employeeType = ko.observable('TypeB');     
}; 

I radiotelefon przyciski:

<input name="x" type="radio" data-bind="checked: employeeType" 
     value="TypeA" title="Employee type A" /> 
<input name="x" type="radio" data-bind="checked: employeeType" 
     value="TypeB" title="Employee type B" /> 

Demo JSFiddle.

Jeśli chcesz zachować employeeTypeA i employeeTypeB właściwości, które możesz wprowadzić UCE właściwość komputerowej, która zwraca typ:

this.employeeTypeA = ko.observable(false); 
this.employeeTypeB = ko.observable(true); 
this.employeeType = ko.computed(function() 
{ 
    if (this.employeeTypeA()) 
     return 'TypeA'; 
    if (this.employeeTypeB()) 
     return 'TypeB'; 
},this); 

Również w tym przypadku trzeba dodać atrybuty value na przycisków radiowych.

Demo JSFiddle.