Knockout - Jquery Resizable & Style Binding

Knockout Template

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css">
<input data-bind="value:width" />
<div id="resizable" class="taskbar-style" data-bind="resizable: { } , widthUpdate : width, style : { width : width()+'px'}"></div>

CSS

.taskbar-style
{
    
    height: 100px;
    background-color: #00FFFF;
    border: 1px solid #050DFA;
    float: left;
    position: absolute;
    width: 100px;

}

JavaScript

function ViewModel() {
   var self = this;
   this.width = ko.observable(100); 
};



$(function() {  
    
    ko.bindingHandlers.resizable = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
           var options = valueAccessor() ,
               allBindings = allBindingsAccessor(), 
               widthUpdate = allBindings.widthUpdate;            
           $(element).resizable(options);
           $(element).bind( "resize", function(event, ui) {          
                widthUpdate(parseInt($(element).css("width"),10));
          });            
        }       
    };   

    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);  
     
})