бутстрап горизонтальная группа переключателей, не работающая с нокаутом js

Question

с трудным временем получения привязки переключателей для нокаута для работы с горизонтальной группой кнопок бутстрапа.

вот скрипка.

http://jsfiddle.net/LkqTU/27489/

здесь код.

<h3>Works When I don't use the button groups</h3> 

<input type="radio" name="processingType" value="Partial" data-bind="checked: ProcessingChoice" /> Partial 
<input type="radio" name="processingType" value="Total" data-bind="checked: ProcessingChoice" /> Total 
<input type="radio" name="processingType" value="OverUnder" data-bind="checked: ProcessingChoice" /> Over Under 
<p> 
    <br>The Choice is <strong><span data-bind="text: ProcessingChoice"></span></strong> 

<hr> 
    <h3>With Button Groups not so much</h3> 

     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-default"> 
       <input type="radio" name="BootstrapprocessingType" value="Partial" autocomplete="off" data-bind="checked: BootstrapProcessingChoice">Partial</label> 
      <label class="btn btn-default"> 
       <input type="radio" name="BootstrapprocessingType" value="Total" autocomplete="off" data-bind="checked: BootstrapProcessingChoice">Total</label> 
      <label class="btn btn-default"> 
       <input type="radio" name="BootstrapprocessingType" value="Over Under" autocomplete="off" data-bind="checked: BootstrapProcessingChoice">OverUnder</label> 
       </div> 
       <div> <br>The Bootstrap Choice is <span data-bind="text: BootstrapProcessingChoice"></span></div> 

здесь модели представления

var ViewModel = function() { 
    this.ProcessingChoice = ko.observable("Total"); 
    this.BootstrapProcessingChoice = ko.observable("Total"); 
}; 

ko.applyBindings(new ViewModel()); 

Answer 1

Поскольку buttons.js является настраиваемым плагином bootstrap/jquery, для этого вам требуется пользовательская привязка. Не самый лучший, но будет работать

ko.bindingHandlers.bsButtonChecked = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var val = valueAccessor(); 
     $(element).on('change', function(e,v,c){ 
      val($(element).val()) 
     }); 

    }, 
    update: function(element, valueAccessor){ 
     var val = valueAccessor(); 
     var $parent = $(element).closest('[data-toggle="buttons"]') 
     var all = $parent.find("input:radio"); 
     $.each(all, function(index,element){ 
      if($(element).val()==val()){ 
      $(element).trigger('click'); 
      } 
     }); 
    } 
}; 

Fiddle

Answer 2

ок спасибо, я получил это работает, используя один из других постов пришлось изменить его немного.

<span class="btn-group dontshowwhenloading modelLoad"> 
               <!-- ko if: HasPartial --> 
               <button data-bind="css: partialButtonCss, click: function() { ProcessingChoice('Partial') }" type="button" class="btn" value="Partial">Partial</button> 
               <!-- /ko --> 
               <!-- ko if: HasTotal --> 
               <button data-bind="css: totallButtonCss, click: function() { ProcessingChoice('Total') }" type="button" class="btn" value="Total">Total</button> 
               <!-- /ko --> 
               <!-- ko if: HasVariance --> 
               <button data-bind="css: overUnderlButtonCss, click: function() { ProcessingChoice('OverUnder') }" type="button" class="btn" value="OverUnder">Over Under</button> 
               <!-- /ko --> 
              </span>