Buttonset checkboxes BIU with knockoutJS

by Asle Gundersby

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.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="ui-button" data-bind="attr: { 'id' : 'titleBold' + ID },checked: isBold" >
    <label data-bind="attr : { for : 'titleBold' + ID}">B</label>
    <input type="checkbox" class="ui-button" data-bind="attr: { 'id' : 'titleItalic' + ID }, checked: isItalic">
    <label data-bind="attr : { for : 'titleItalic' + ID}">I</label>
    <input type="checkbox" class="ui-button" data-bind="attr: { 'id' : 'titleUnderlined' + ID },checked: isUnderlined">
    <label data-bind="attr : { for : 'titleUnderlined' + ID}">U</label>
    <!-- /ko -->    
</div>
  
<hr/>
    <pre data-bind="text: ko.toJSON($root,null,2)"></pre>
    
<div data-bind="with: selected, jqButtonset: {}">
    <input class="ui-helper-hidden-accessible" type="checkbox"  data-bind="attr: { 'id' : 'myBold'+ ID}, checked: isBold" >
        <label 
        rule="button" aria-disabled="false"
        class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-active" 
        data-bind="attr: { 'for' : 'myBold'+ ID},
                   hasFocus: $root.focussing,
                   event: { mouseover: $root.bMouseOver, mouseout: $root.bMouseOut },
                   css: { 'ui-state-active' : isBold, 'ui-state-focus' : $root.focussing(), 'ui-state-hover' : $root.bHovering() }">
            <span class="ui-button-text">B</span>
        </label>
    <input class="ui-helper-hidden-accessible" type="checkbox"  data-bind="attr: { 'id' : 'myItalic'+ID}, checked: isItalic">
        <label 
       ...

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);
    
    // handling hover & focus
    self.bHovering = ko.observable(false);
    self.iHovering = ko.observable(false);
    self.uHovering = ko.observable(false);
    //self.hovering = ko.observable(false);
    self.focussing = ko.observable(false);
    self.bMouseOver = function(){ self.bHovering(true);};
    self.bMouseOut = function(element){ self.bHovering(false); };
    self.iMouseOver = function(){ self.iHovering(true);};
    self.iMouseOut = function(element){ self.iHovering(false); };
    self.uMouseOver = function(){ self.uHovering(true);};
    self.uMouseOut = function(element){ self.uHovering(false); };
    

};


ko.applyBindings( new viewModel() );