JSFiddle - React, Tailwind, and code Playground

by Asle Gundersby

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-debug.js"></script>
<script src="https://github.com/gvas/knockout-jqueryui/releases/download/v0.5.2/knockout-jqueryui.js"></script>
<select data-bind="options:items, optionsCaption: 'Choose item...', optionsText: 'name', value: selected"></select>

<div id="format" data-bind="buttonset: {}">
      <!-- ko with: selected -->
    <input type="checkbox"  class="my-button " data-bind="attr: { 'id' : 'titleBold' + ID },checked: isBold" >
    <label class="my-button left" data-bind="attr : { 'for' : 'titleBold' + ID}, css: { 'pushed' : isBold() }">B</label>
    <input type="checkbox" class="my-button" data-bind="attr: { 'id' : 'titleItalic' + ID }, checked: isItalic">
    <label class="my-button" data-bind="attr : { 'for' : 'titleItalic' + ID}, css: { 'pushed' : isItalic() }">I</label>
    <input type="checkbox" class="my-button right" data-bind="attr: { 'id' : 'titleUnderlined' + ID },checked: isUnderlined">
    <label class="my-button right" data-bind="attr : { 'for' : 'titleUnderlined' + ID}, css: { 'pushed' : isUnderlined() }">U</label>
    <!-- /ko -->    
</div>
  
<hr/>
    <pre data-bind="text: ko.toJSON($root,null,2)"></pre>
    
<div id="format" data-bind="jqButtonset: {}">
    <input type="checkbox" id="myBold2"   data-bind="checked: isBold" ><label for="myBold2">B</label>
    <input type="checkbox" id="myItalic2"  data-bind="checked: isItalic"><label for="myItalic2">I</label>
    <input type="checkbox" id="myUnderlined2" data-bind="checked: isUnderlined"><label for="myUnderlined2">U</label>                                   
</div>

CSS

select {
    margin-bottom: 8px;
}

label.my-button {
    background: #999;
    width: 20px!important;
    height: 20px!important;
    display: inline;
    padding:2px 8px;
    left:-20px;
    position: relative;
    border: 1px outset #666;
    margin-right: -24px;
    margin-top: 10px;
}
label.my-button.pushed{
    background: #ededed;
}
.left{
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.right{
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}

JavaScript

ko.bindingHandlers.jqButtonset = {
    init: function (element) {
        $(element).buttonset(); // Turns the element into a jQuery UI button
    },
    update: function (element, valueAccessor) {
        var currentValue = valueAccessor();
        // Here we just update the "disabled" state, but you could update other properties too
        $(element).buttonset("option", "disabled", currentValue.enable === false);
    }
};

Title = function(data){
    var self = this;

    self.ID = data.ID;    
    self.name = ko.observable(data.name);
    self.isBold = ko.observable(data.isBold || false);
    self.isItalic = ko.observable(data.isItalic || false);
    self.isUnderlined = ko.observable(data.isUnderlined || false);
    
    return self;
};

viewModel = function(){
    var self = this;
    
    self.items = ko.observableArray([
        new Title( {ID: 1, name: 'The first one', isBold: true, isItalic: false }),
        new Title( {ID: 2, name: 'The second one', isBold: false, isItalic: true, isUnderlined: true })
    ]); 
    self.selected = ko.observable();
    
    self.isBold = ko.observable(false);
    self.isItalic = ko.observable(false);
    self.isUnderlined = ko.observable(false);

};



ko.applyBindings( new viewModel() );