JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.js"></script>
<body data-bind="contextMenu:{disabled:disableMenu}">
<div class="context-menu-one">Right-Click</div>
Disable: <select data-bind="value:disableMenu, options:disableOptions"></select>
<div class="context-menu-one">Also Here</div>
</body>
JavaScript
ko.bindingHandlers.contextMenu = {
init: function (element, data, allbindings, data) {
$.contextMenu({
selector: '.context-menu-one',
callback: function (key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {
name: "Clickable",
icon: "edit",
disabled: function (key, opt) {
return data.disableMenu();
}
}
}
});
}
};
var vm = (function () {
return {
disableMenu: ko.observable(false),
disableOptions: [true, false]
};
}());
ko.applyBindings(vm);