Wykorzystanie Twitter Bootstrap przycisk grupa jak radio wybrać z powiązaniami pucharowej

Question

to działa:

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 
} 

Zgodnie z oczekiwaniami, gdy wybierasz drugie radio, którego wartość obserwowalnego priorytetu zmienia się na "potrzeba". Chciałbym jednak użyć grupy przycisków Bootstrap jako radia. Oto HTML mam, ale to nie zmienia zaobserwowania zgodnie z oczekiwaniami:

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

aktualizacja Mam jsfiddle dzieje tutaj: http://jsfiddle.net/a8wa8/6/ „priority1” jest standardowym wybiera radiowe oraz „priority2” jest bootstrap guziki.

Answer 1

Problem polega na tym, że używasz wiązania Checked z przyciskiem, który nie jest dozwolony, zamiast tego możesz użyć wiązania kliknięcia. sprawdzić ten skrzypce:

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

aktualizacja:

Tak można to osiągnąć za pomocą ko css binding. Sprawdź ten zaktualizowaną skrzypce:

Updated Fiddle

Answer 2

Urządzenie checked binding działa tylko z kontrolkami "możliwymi do sprawdzenia", takimi jak pole wyboru (<input type='checkbox'>) lub przyciskiem radiowym (<input type='radio'>).

Ale w drugim przykładzie masz button, gdzie bootstrap po prostu emuluje wygląd grupy przycisków radiowych, więc wiązanie checked nie działa.

Jednakże można użyć click binding gdzie można przekazać wartość do zaobserwowania:

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

I można ukryć to za zwyczaj wiązania:

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); 
    }, 
} 

Wtedy można go używać jak:

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