JSFiddle - React, Tailwind, and code Playground

by jearles

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js?"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<h2>Bootstrap Demo</h2>

<div class="btn-group" data-toggle="buttons-radio" data-bind="foreach: buttons">
    <button class="btn btn-primary" data-bind="text: name, css: {active: selected}, click: $parent.selectButton"></button>
</div>

JavaScript

var Button = function(name) {
  this.name = name;
  this.selected = ko.observable(false);
}

var ViewModel = function() {
    var self = this;
    self.buttons = ko.observableArray([ new Button('One'), 
                                        new Button('Two'),
                                        new Button('Three')]);
    self.selectedButton = ko.observable();
    self.selectButton = function(button) {
        if (self.selectedButton()) self.selectedButton().selected(false); 
        
        self.selectedButton(button);
        self.selectedButton().selected(true);
    }
}

ko.applyBindings(new ViewModel());