KO + custom binding + Datatables

by Sky Sigal

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>



<div id="demo2" class="" 
     data-bind="datatable:{columns:columns, data:dataSet}" 
     style="min-width: 310px; height: 200px; margin: 0 auto"></div>

JavaScript

ko.bindingHandlers.datatable = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        $e = $(element);
			
			if ($e.dataTable == undefined){
				$e.text("dataTable function not recognized: library loaded?");
				return;
			}
      
			//if (!$e.hasClass( "epoch" )){$e.addClass('epoch');}
			
			//Get the value, if it is observable, not the function:
			var value = valueAccessor();
        	//var value = ko.unwrap(value);
			//value = ko.toJS(value);
            var options = (value!=null)&&(value.options!=null)?value.options:value;
            
        
            $e.html( '<table cellpadding="0" cellspacing="0" border="1" class="dataTable display"></table>' );
  
        $('.dataTable',$e).dataTable(options);
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
    }
}



 

var viewModel = {
    
    dataSet : [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
    ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
    ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
    ['Gecko','Camino 1.0','OSX.2+','1.8','A'],
    ['Gecko','Camino 1.5','OSX.3+','1.8','A'],
    ['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
    ['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
    ['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
    ['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
    ['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
    ['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
    ['Gecko','Mozilla...