knockout.js布爾與單選按鈕的數據綁定問題

我目前正在做下面的事情來補償布爾的沒有很好地映射到單選按鈕。由於字段是如何從observables中讀出的，我堅持將1和0綁定到值（而不是true和false）。 Pref1/Pref2的值來自服務器的true/false布爾值。這裏的關鍵是我不僅要將單選按鈕的選中值與數據綁定，以匹配對象中的真/假，而且還希望將true/false的布爾值寫回到GraduationClass對象中。我的補償代碼不僅醜陋，而且不可擴展。knockout.js布爾與單選按鈕的數據綁定問題

<input type="radio" value="1" name="radioGroup" data-bind="checked: Pref1" />Yes 
<input type="radio" value="0" name="radioGroup" data-bind="checked: Pref2" />No  
<a href="javascript:void(0);" data-bind="click: $root.saveGraduationClass ">Save</a> 

function SiteSettingsViewModel() { 
    var self = this; 
    this.saveGraduationClass = function(graduationClass) { 
     // hack until i get a custom radio button binding 
     if (graduationClass.Pref1() == 1) { 
      graduationClass.Pref1(true);    
     } else { 
      graduationClass.Pref1(false);    
     } 

     if (graduationClass.Pref2() == 1) { 
      graduationClass.Pref2(true); 
     } else { 
      graduationClass.Pref2(false); 
     } 

     // ...ajax call to save graduationClass to the server 
    } 

function GraduationClass(data) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, this); 
}

來源

2012-06-10 Adam Levitt

如果是「是/否」問題，將表單更改爲使用複選框而不是單選按鈕更容易嗎？ – Niko

我想我可以，但理論上，我只想看看如何解決這個問題。 –

@AdamLevitt - 您可以編寫一個擴展器，將Pref1/2的值始終轉換爲布爾值。但是我同意Niko的看法，這與單選按鈕的工作原理沒有任何關係。 – madcapnmckay

這裏是例如從knockoutJs網站，演示如何使用單選按鈕與「選中」屬性：

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> 
<div data-bind="visible: wantsSpam"> 
    Preferred flavor of spam: 
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div> 
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div> 
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div> 
</div> 

<script type="text/javascript"> 
    var viewModel = { 
     wantsSpam: ko.observable(true), 
     spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button 
    }; 

    // ... then later ... 
    viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked 
</script>

但我不明白爲什麼你用兩個對象 - 「PREF1」和「 Pref2「從一個單選按鈕組」radioGroup「？在這種情況下，您可以像使用「spamFlavor」一樣使用一個對象。

因此，請更詳細地描述您想要綁定的內容：一個單選按鈕組由一個選定的值或其他內容組成。

你也可以使用計算的觀測值來計算不同的值，請參見example。

來源

2012-06-12 17:46:15

在標題中看到它如何提到綁定**布爾**？從我的角度來看，這並沒有回答所有問題。 –

@CarrieKendall，我認爲作者將其標記爲回答，因爲他在他的問題上得到了答案，我錯了嗎？ –

knockout.js布爾與單選按鈕的數據綁定問題

回答

相關問題