How do I wrap a css knockout binding with custom binding?

Question

I am trying to create a custom binding which will encapsulate a series of css bindings. Specifically, instead of:

data-bind="css: { success: PickInventoryViewModel.ajaxSuccess, fail: PickInventoryViewModel.ajaxFailure, working: PickInventoryViewModel.ajaxWorking }"

I want this:

data-bind="ajaxStatus: PickInventoryViewModel"

The ajaxStatus binding would be a custom binding which would initiate the appropriate css bindings rather than having this implementation detail sprinkled throughout my app. However, the css bindingHandler doesn't have an init function so I'm not entirely sure how to go about making this work.

I suppose I could subscribe to each of the observables and call ko.bindingHandlers['css'].update when the observed value is true. Another possible option I've considered is to inject the css binding to the html element and rebind the node (I think that's the essence of applyBindingsToNode as exemplified in this fiddle.

Does anyone have a better idea?

Thanks, Vinney

Answer 1

from your custom binding init function do

ko.applyBindingsToNode(element, { css: { /* stuff */ } });