jQuery UI Call After Knockout JS Binding (Knockout Custom Binding)

My team was having problem with calling jQuery UI widget, specifically Button widget, to modify the look and feel of the buttons. Our root of the problem is because we are calling jQuery UI before Knockout binding happens. Because our Knockout binding is actually creating more DOM element, jQuery UI call before binding will not apply. For design reason, our jQuery UI code can’t live after Knockout binding.

This is a typical scenario where Knockout Custom Binding comes to rescue, and obviously, one of the use case.

First, we define Knockout Custom Binding:

ko.bindingHandlers.jQueryUIButton = {

    init: function(element, valueAccessor) {

        var options = valueAccessor() || {};

        $(element).button(options);

    }

}

Then, data bind:

<button data-bind="jQueryUIButton: { icons: { primary: 'ui-icon-locked' }, text: false }"></button>

Read more on how Knockout Custom Binding works here… If you are JavaScript programmer, Knockout should be in your tool belt.

What do You Want to Have Accomplished?

“You could do anything you put your mind to”

“In 30 years, what do you want to have accomplished? It’s OK not to have an answer, but you need to start thinking about it. Once you know that, things start to become clear. The people you meet, the opportunities and situations you find are often a function of that objective.”

– Jeff Weiner, LinkedIn CEO