Usa Twitter Bootstrap gruppo di pulsanti di come la radio selezionare con attacchi ad eliminazione diretta

Question

Questo è il lavoro:

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 
} 

Come previsto, quando selezionate la seconda radio il valore di priorità osservabile cambia in "bisogno". Tuttavia, mi piacerebbe utilizzare un gruppo di pulsanti Bootstrap di Twitter come radio. Ecco il codice HTML che ho, ma non cambia il osservabile come previsto:

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

aggiornamento ho un jsfiddle andando qui: http://jsfiddle.net/a8wa8/6/ "priority1" è la seleziona radio standard e "priority2" è il bootstrap pulsanti.

Answer 1

Il problema è che si sta utilizzando il collegamento Checked con il pulsante che non è consentito, invece è possibile utilizzare il collegamento dei clic. controllare questo violino:

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

Aggiornato:

Sì, è possibile raggiungere questo obiettivo utilizzando ko css binding. Controllare questo violino aggiornamento:

Updated Fiddle

Answer 2

L'checked binding funziona solo con controlli "verificabili" come casella di controllo (<input type='checkbox'>) o di un pulsante di opzione (<input type='radio'>).

Ma si ha button nel secondo esempio in cui bootstrap emula l'aspetto del gruppo di pulsanti di opzione in modo che l'associazione checked non funzioni.

Tuttavia è possibile utilizzare il click binding in cui si passa il valore alla vostra osservabile:

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

E si può nascondere questo dietro una consuetudine vincolante:

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

Quindi è possibile utilizzare come:

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