淘汰賽結合的單選按鈕最初沒有工作

Question

目前，我有以下的HTML ...

<input type="radio" style="height: 12px; width: 20px;" name="physTabPregRadio" value="true" data-bind="checked: pregnant.radioBool" />Y 
<input type="radio" style="height: 12px; width: 20px;" name="physTabPregRadio" value="false" data-bind="checked: pregnant.radioBool" />N 
<span data-bind="text: pregnant.radioBool" /> 

...和radioBool功能是KO的延伸，這裏定義...

ko.observable.radioBool = function() { 
    var observable = ko.observable(); 
    observable.radioBool = ko.computed({ 
     read: function() { 
      if (observable() === true) return 'true'; 
      else if (observable() === false) return 'false'; 
      else return 'unknown'; 
     }, 
     write: function (v) { 
      if (v.toLowerCase() === 'true') observable(true); 
      else if (v.toLowerCase() === 'false') observable(false); 
      else observable(undefined); 
     } 
    }); 
    return observable; 
}; 

...在這樣的模式被初始化...

self.pregnant = ko.observable.radioBool(); 
self.pregnant(false); 

在加載頁面，無論是無線電b utton被選中，但span的文本是「false」。是否有任何可能的原因爲什麼單選按鈕不被檢查，即使它的值等於單選按鈕的值之一？

Answer 1

需要初始化var observable = ko.observable(false);（與false明確），否則將有undefined作爲其在第一個值，因此在read功能可按將通過下降到最終else。

見這個例子：

var self = {}; 
 

 
ko.observable.radioBool = function() { 
 
    var observable = ko.observable(false); 
 
    observable.radioBool = ko.computed({ 
 
     read: function() { 
 
      if (observable() === true) return 'true'; 
 
      else if (observable() === false) return 'false'; 
 
      else return 'unknown'; 
 
     }, 
 
     write: function (v) { 
 
      if (v.toLowerCase() === 'true') observable(true); 
 
      else if (v.toLowerCase() === 'false') observable(false); 
 
      else observable(undefined); 
 
     } 
 
    }); 
 
    return observable; 
 
}; 
 

 
self.pregnant = ko.observable.radioBool(); 
 

 
ko.applyBindings(self);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<input type="radio" name="physTabPregRadio" value="true" data-bind="checked: pregnant.radioBool" />Y 
 
<input type="radio" name="physTabPregRadio" value="false" data-bind="checked: pregnant.radioBool" />N 
 
<span data-bind="text: pregnant.radioBool" />