Radioknöpfe Knockoutjs

Question

Ich habe 2 Werte, die ich von Server A und B bekomme. Ich kann nur eine wahr zu einer Zeit haben.

Noch einmal, was ich brauche ist eines der Funkgeräte zu einem Zeitpunkt überprüft werden, so dass nur ein echter Wert.

var viewModel = { 
 
    radioSelectedOptionValue: ko.observable("false"), 
 
    A: ko.observable("false"), 
 
    B: ko.observable("false") 
 
}; 
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> 
 
<div class='liveExample'>  
 
     <h3>Radio View model</h3> 
 
     <table> 
 
     <tr> 
 
      <td class="label">Radio buttons:</td> 
 
      <td> 
 
       <label><input name="Test" type="radio" value="True" data-bind="checked: A" />Alpha</label> 
 
       <label><input name="Test" type="radio" value="True" data-bind="checked: B" />Beta</label> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    A-<span data-bind="text: A"></span> 
 
    B-<span data-bind="text: B"></span> 
 
</div>

Answer 1

Die checked Bindung funktioniert anders für Radio-Buttons und Checkboxen:

Vom documentation:

Für Radio-Buttons, wird KO das Element zu überprüfen wenn und nur wenn die para Meterwert entspricht dem Attribut value des Optionsfeldknotens. Also sollte Ihr Parameterwert ein String sein.

So müssen Sie das value Attribut Ihrer Eingaben auf „A“ und „B“ und dann binden an die radioSelectedOptionValue die „A“ oder „B“ je nachdem, welche Optionen enthalten ausgewählt:

<label> 
    <input name="Test" type="radio" value="A" 
      data-bind="checked: radioSelectedOptionValue" /> 
    Alpha 
</label> 
<label> 
    <input name="Test" type="radio" value="B" 
      data-bind="checked: radioSelectedOptionValue" /> 
    Beta 
</label> 

Wenn Sie Ihre boolean Eigenschaften behalten möchten: A und B, müssen Sie sie ko.computed (read-only, beschreibbar) machen, die den Wert des radioSelectedOptionValue wird verwenden/konvertiert:

this.radioSelectedOptionValue = ko.observable(); 
this.A = ko.computed({ 
     read: function() { 
      return this.radioSelectedOptionValue() == "A"; 
     }, 
     write: function(value) { 
      if (value) 
       this.radioSelectedOptionValue("A"); 
     } 
    }, this); 

Demo JSFiddle.

Answer 2

Knockout 3.x hat die Option bookmarkedValue hinzugefügt. Dadurch können Sie andere Werte als Strings angeben.

<input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: true" /> 
    <input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: false" /> 

http://jsfiddle.net/t73d435v/