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.
var callbacks = valueAccessor();
<span data-bind="customFieldContextMenu: { editCustomField:
$root.editCustomField , deleteCustomField : $root.deleteCustomField
} "></span>
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(); };
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>
