通过 Knockout 调用更新 JQuery 上下文菜单

Question

我们正在实现一个相当复杂的单页应用程序，并决定使用“Jquery-context-menu”工具箱。但是，我们有一个基本问题，经过两天的搜索和网上阅读后，我们有点想不通了。

基本问题是：如果是的话，如何在菜单仍然打开时从菜单外部访问更新功能（即禁用功能）？

场景： 我们正在实施一个游戏。我们使用“jquery 上下文菜单”作为可以由用户激活的图标的上下文菜单（想想 rpg 类型的图标）。通过单击激活它后，它将自动停用（几秒钟后），然后准备好在一段时间后再次重新激活。我们什么是菜单正在捕获图标的这种状态，通过启用或禁用菜单，同时菜单保持打开状态。

有一个示例说明如何通过在同一菜单中按下按钮来更改菜单项的可见性，如下所示：

http://medialize.github.io/jQuery-contextMenu/demo/disabled-changing.html

但是，我们的目标是从外部更新菜单（通过淘汰订阅调用）。所以我们想做这样的事情：

myknockoutobservable.subscribe(function(newValue){
correctRefernceToThis.data('disableItem1', newvalue)});      

虽然禁用的功能看起来像：

disabled: function(key, opt) {
return !this.data('cutDisabled')};       

或者，如果这不起作用，我们也许可以直接调用更新函数

 myKnockoutobservable.subscribe(function(newValue){
$.contextMenu.op.update(correctRefernceToOpt,correctRefernceToroot)});  

然后在回调中查询可观察到的淘汰赛

if (!myKnockoutobservable) {
return true;}
else {
return false;   

主要问题似乎是我们没有正确引用上下文，所以我们没有从 Jquery 上下文菜单外部处理正确的 this，opt，to root，变量（至少那个是我们目前的看法）。如果有人可以帮助我们找到解决方案，或者甚至是一些可以尝试的好主意（我们还没有），我们会非常高兴。

Answer 1

你不会订阅，你只会在你的视图模型中有一个可观察的对象，你设置为真或假，菜单项将作为响应切换。您的菜单项的禁用成员将如下所示：

disabled: function() { 
    return myobservable();
}

正如 James Thorpe 所说，您需要创建一个自定义绑定处理程序来设置上下文菜单。

听起来您正在使用几种不熟悉的工具。这是一个带有最小示例的小提琴：http://jsfiddle.net/sv3m7ok8/

更新 我突然想到，由于上下文菜单没有绑定到单个元素，而是使用了选择器，所以在 body 标记上进行绑定更有意义。所以一个更新的例子：http://jsfiddle.net/sv3m7ok8/1/

再次更新 我现在了解到，您正在专门尝试在菜单打开时启用/禁用菜单项（并且它通常不会这样做）。我必须深入了解菜单项节点，并连接订阅以在其上设置禁用的类。

init: function (element, data, allbindings, data) {
    var dynamicDisable = false;
    $.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 (opt, key) {
                    if (!dynamicDisable) {
                        var node = key.items.edit.$node[0];
                        data.disableMenu.subscribe(function (dis) {
                            $(node)[dis ? 'addClass' : 'removeClass']('disabled')
                        });
                        dynamicDisable = true;
                    }
                    return data.disableMenu();
                }
            }
        }
    });
}

我的小提琴设置了一个间隔来切换 disableMenu。您可以看到菜单项变为活动状态并变灰。

http://jsfiddle.net/sv3m7ok8/3/

Answer 2

感谢您的帮助！我理解你的方法，这正是我们所做的:-) 我可能对这个问题不太清楚，但这是禁用回调的当前代码。

disabled: function(key, opt) {
                        if (!self.item._blocks.Feature._processedStack().canBeActivated()) {
                            return true;
                        }
                        else {
                            return false;
                        }
                    }

这样可以在菜单关闭并再次打开时更新状态。然而，当菜单仍然打开时更新不起作用，因为没有任何东西触发菜单更新到新值。

目前我们正在尝试使用不同的库来解决问题，会及时通知您。

最好的，卡斯帕