Verwenden Twitter Bootstrap-Taste Gruppe als Radio mit Knockout-Bindungen wählen

Question

Dies funktioniert:

view.html

<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="want" style="margin-top: -3px; margin-right: 3px;" />I want to</div> 
<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="need" style="margin-top: -3px; margin-right: 3px;"/>I need to</div> 

controller.js

function feedbackViewModel() { 
    var self = this; 
    self.priority = ko.observable("want"); 
    //lots of other stuff 
} 

Wie erwartet, wenn Wenn Sie das zweite Radio auswählen, ändert sich der Wert des Prioritätsbeobachtungsobjekts in "Bedarf". Ich möchte jedoch eine Twitter-Bootstrap-Schaltflächengruppe als Radio verwenden. Hier ist der HTML Ich habe, aber es ändert nichts an der beobachtbaren wie erwartet:

<span class="btn-group" data-toggle="buttons-radio"> 
    <button data-bind="checked: priority" type="button" class="btn" value="want">I want to</button> 
    <button data-bind="checked: priority" type="button" class="btn" value="need">I need to</button> 
</span> 

Update Ich habe einen jsfiddle gehen hier: http://jsfiddle.net/a8wa8/6/ „Priority1“ ist die Standard-Radio wählt und „Priorität 2“ wird die Bootstrap Tasten.

Answer 1

Das Problem ist, dass Sie Checked Bindung mit Schaltfläche verwenden, die nicht zulässig ist, stattdessen können Sie Klickbindung verwenden. überprüfen Sie diese Geige:

http://jsfiddle.net/a8wa8/7/

Aktualisiert:

Ja, Sie können dies erreichen, indem Sie ko css binding. Überprüfen Sie diese aktualisierte Geige:

Updated Fiddle

Answer 2

Die checked binding funktioniert nur mit "Checkable" -Steuerelementen wie Kontrollkästchen (<input type='checkbox'>) oder einem Optionsfeld (<input type='radio'>).

Aber Sie haben button in Ihrem zweiten Beispiel wo Bootstrap emuliert nur das Aussehen der Radiobutton-Gruppe, so dass die checked Bindung funktioniert nicht.

auch immer Sie die click binding verwenden können, wo Sie den Wert auf Ihre beobachtbare passieren:

<span class="btn-group" data-toggle="buttons-radio"> 
    <button data-bind="click: function() { priority2('want') }" 
      type="button" class="btn" value="want">I want to</button> 
    <button data-bind="click: function() { priority2('need') }" 
      type="button" class="btn" value="need">I need to</button>  
</span> 

Und Sie können diese Bindung hinter einem benutzerdefinierten verbergen:

ko.bindingHandlers.valueClick = { 
    init: function(element, valueAccessor, allBindingsAccessor, 
        viewModel, bindingContext) {  
     var value = valueAccessor(); 
     var newValueAccessor = function() { 
      return function() { 
       value(element.value); 
      }; 
     }; 
     ko.bindingHandlers.click.init(element, newValueAccessor, 
      allBindingsAccessor, viewModel, bindingContext); 
    }, 
} 

Dann können Sie es verwenden möchten:

<span class="btn-group" data-toggle="buttons-radio"> 
    <button data-bind="valueClick: priority2" 
      type="button" class="btn" value="want">I want to</button> 
    <button data-bind="valueClick: priority2" 
      type="button" class="btn" value="need">I need to</button>  
</span> 

Demo JSFiddle.