knockout.js bind bootstrap btn-group

Question

I'm wondering if it's possible to bind the selected value in a Twitter bootstrap radio btn-group to an observable in knockout.js?

In my case, I'm binding the group to an observableArray like so

  <div class="btn-group" data-toggle="buttons-radio" data-bind="foreach: myItemTypes">
    <button class="btn active" data-bind="html: Value, Id: Key">${ Description }</button>
  </div>

Any guidance?

Cheers,

Fergal.

Answer 1

Here is an example of how this could be done:

http://jsfiddle.net/jearles/vu8pk/

By using the css binding we can dynamically turn the "active" class on/off based on the selected observable for each button.

Answer 2

See also checkedButtons bindingHandler