cách đặt nút radio bằng cách sử dụng knockout.js?

Question

Tôi có hai nút radio.

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

Tôi Populating mô hình của tôi như thế này

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

Giá trị được đến từ DB một cách hoàn hảo và nó bị dân cư trong self.IsGlobal như đúng/sai. Dựa trên điều này đúng/sai, tôi muốn thiết lập nút radio của tôi kiểm tra.

Answer 1

Các checked binding hoạt động khác nhau cho nút radio:

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.

Vì vậy, bạn IsGlobal nên tổ chức một chuỗi và bạn cần phải có chuỗi tương tự như giá trị của các nút radio:

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

Và trong chế độ xem của bạn:

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

Nếu bạn muốn giữ IsGlobal để lưu trữ một giá trị boolean bạn cần để tạo ra một tài sản tính toán mới cho nút radio mà không chuyển đổi:

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

Demo JSFIddle.

Và bằng cách như Tomas lưu ý systax ràng buộc của bạn bị phá vỡ trong mẫu của bạn.

Answer 2

Sau khi thuộc tính data-bind phải là dấu bình đẳng thay vì dấu hai chấm.

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

Answer 3

Giá trị từ DB là boolean True/False

tôi đã thay đổi trong viewmodel:

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

và trong 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>