How to data-bind .resizable().draggable()?

Question

I know you can do this:

$(".myClass").resizable().draggable();

but how would you use data-bind="" to do the same thing?

Answer 1

The simplest way would be to define custom binding handlers for the behaviors:

ko.bindingHandlers.resizable = {
    init: function(element, valueAccessor) {
         var options = valueAccessor();
         $(element).resizable(options);
    }  
};

ko.bindingHandlers.draggable = {
    init: function(element, valueAccessor) {
         var options = valueAccessor();
         $(element).draggable(options);
    }  
};

Then, bind to it like:

<div data-bind="resizable: { }, draggable: { }"></div>

This allows you to pass any options that you want to the resizable and draggable calls.

Sample: http://jsfiddle.net/rniemeyer/eCZH4/