width / resize

by jms_a88

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<div id="test" data-bind="width: myWidth">Test</div>


<hr/>

<input data-bind="value: myWidth" />

CSS

div { background: #ccc; }

JavaScript

ko.bindingHandlers.width = {
    init: function(element, valueAccessor) {
         var widthObservable = valueAccessor();
    
          ko.utils.registerEventHandler(element, "resize", function() {
              widthObservable($(element).css("width"));
          });
    },
    update: function(element, valueAccessor) {
        var width = ko.utils.unwrapObservable(valueAccessor());
        $(element).css("width", width);
    }    
};

    
var viewModel = {
    myWidth: ko.observable("100px")
};
  
ko.applyBindings(viewModel);
    
setTimeout(function() {
    viewModel.myWidth("50px");
}, 1000);

setTimeout(function() { 
    $("#test").css("width", "75px").trigger("resize");
}, 2000);

$(window).resize(function(){
    alert("resized");
});