JQuery Controls with knockout making custom handlers

Here i am going to explain how to use jquery or any client side framework control with knockout.
as i have already explained how knockout hanlder works and how to create them in my last article.

To use any jquery or javascript functionality we need to create a knockout custom handler as given below. Here i demostrated three very use full jquery control with knockout custom handler you can use it as it or do some changes as per your need.

Jquery AutoComelete with Knockout Handler -

ko.bindingHandlers.ko_autocomplete = {
    init: function (element, params, allBindingAccessor, viewModel) {
$(element).autocomplete(params()).data("ui-autocomplete")._renderMenu = function (ul, items) {
            var that = this;
            $.each(items, function (index, item) {
                that._renderItemData(ul, item);
            });
            $(ul).find("li:first").addClass("selected");
        };
    },
    update: function (element, params, allBindingAccessor, viewModel) {
        $(element).autocomplete("option", "source", params().source);
    }

};

Jquery Combobox control With Knockout Handler -

ko.bindingHandlers.ko_combobox = {
    init: function (element, params, allBindingAccessor, viewModel) {
        $(element).combobox(params());
    },
    update: function (element, params, allBindingAccessor, viewModel) {
        $(element).combobox("option", "source", params().source);
    }

};

Jquery ContextMenu With Knockout Handler -

ko.bindingHandlers.customFieldContextMenu = {
        init: function (element, valueAccessor, allBindingAccessor, viewModel) {
               
                    var callbacks = valueAccessor();
            $.contextMenu({
                selector: ".customField-contexMenu",
                trigger: 'left',
                callback: function (key, options) {
                    if (key == "edit") {
                      function(){ callbacks .editCustomField(); };  
                    }
                    else {
                      function(){ callbacks .deleteCustomField(); };
                    }
                },
                items: {
                    "edit": { name: "Edit", icon: "edit" },
                    "delete": { name: "Delete", icon: "delete" },
                }
            });

        },
        update: function (element, valueAccessor, allBindingAccessor, viewModel) {

     }

  };

How to implement it in html :

<span data-bind="ko_autocomplete: { source: $root.AutoCompleteSearch, select: $root.AutoCompleteSelect}"></span>

<span data-bind="customFieldContextMenu: { editCustomField: $root.editCustomField , deleteCustomField : $root.deleteCustomField } "></span>


Recent Article