loại bỏ không đặt giá trị thực sự ban đầu trên nút radio

Question

Ràng buộc 1 chiều cho tên + hộp kiểm hoạt động tốt, nhưng nó không hoạt động ban đầu cho nút radio employeeTypeA mặc dù giá trị của nó là đúng trong viewmodel html hiển thị nút radio không được thiết lập, tại sao vậy?

<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

Các checked công trình ràng buộc khác nhau cho nút radio, từ các tài liệu:

Đối với nút radio, KO sẽ thiết lập nguyên tố này phải được kiểm tra khi và chỉ khi giá trị tham số bằng nút của nút radio value thuộc tính.

Vì vậy, bạn cần phải thay đổi PersonViewModel của bạn để một cái gì đó như thế này:

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

Và radio nút:

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

Nếu bạn muốn giữ employeeTypeA và employeeTypeB thuộc tính bạn có thể introd UCE một tài sản tính mà trả về kiểu:

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

Cũng trong trường hợp này bạn cần phải thêm value thuộc tính trên nút radio của bạn.

Demo JSFiddle.