如何在 Mithril 中集成自定义上下文菜单

Question

我正在尝试将自定义上下文菜单添加到页面中的某些元素并且确实做到了它在包含 table 的视图中是这样的。上下文菜单附加到名字为 "S" 的 table header:

list.view = function(ctrl, args) {

var contextMenuSelection =      
    m("div", {
    id : "context-menu-bkg-01",
    class : ctrl.isContextMenuVisible() === ctrl.contextMenuId ? "context-menu" : "hide",
    style : ctrl.contextMenuPosition(),
}, [ m("#select.menu-item.allow-hover", {
    onclick : function(e) {
        args.model.callMenu({
            cmdName : this.id
        })
    }
}, "Select all"), m("#deselect.menu-item.allow-hover", {
    onclick : function(e) {
        args.model.callMenu({
            cmdName : this.id
        })
    }
}, "Deselect all"), m("#invertSel.menu-item.allow-hover", {
    onclick : function(e) {
        args.model.callMenu({
            cmdName : this.id
        })
    }
}, "Invert selection") ]);

var table = m("table", [
    m("tr", [ m("th", {
        id : ctrl.contextMenuId,
        config : ctrl.configContextMenu(),
        oncontextmenu : function(e) {
            console.log("2021 contextMenuShow")
            e.preventDefault()
            var coords = utils.getCoords(e)
            var pos = {}
            pos.left = coords[0] + "px"
            pos.top = coords[1] + "px"
            ctrl.contextMenuPosition(pos)
            var id = e.currentTarget.id
            ctrl.isContextMenuVisible(id)
        }
        }, "S"),
            m("th[data-sort-by=pName]", "Name"),
            m("th[data-sort-by=pSize]", "Size"),
            m("th[data-sort-by=pPath]", "Path"),
            m("th[data-sort-by=pMedia]", "Media") ]),
        ctrl.items().map(
           function(item, idx) {
              return m("tr", ctrl.initRow(item, idx), {
              key : item.guid
              }, [ m("input[type=checkbox]", {
                id : item.guid,
                checked : ctrl.isSelected(item.guid)
                }),
                                    m("td", item.pName),
                m("td",  utils.numberWithDots(item.pSize)),
                m("td", item.pPath), m("td", item.pMedia) ])
            }) ])

return m("div", [contextMenuSelection, table])              
}

在按下转义键或用户单击后关闭上下文菜单用鼠标在页面的某处，此功能附加到通过配置属性的元素：

ctrl.configContextMenu = function() { 
    return function(element, isInitialized, context) {
        console.log("1220 isInitialized=" + isInitialized)
        if(!isInitialized) {
           console.log("1225")
           document.addEventListener('click', function() {
              m.startComputation()
              ctrl.contextMenuVisibility(0)
              m.endComputation()
           }, false);
               document.addEventListener('keydown', function() {
              console.log("1235")
              m.startComputation()
                          ctrl.contextMenuVisibility(0)
              m.endComputation()
           }, false)
        }
    };  
};

行为不可预测table：如果 table 为空，则自定义上下文菜单会按预期显示和隐藏。如果填充了 table，则会显示默认的上下文菜单。

使用调试器和一些断点没有给我一些信息是什么除了有时运行调试器会逐步调出自定义上下文菜单。所以我认为它与竞争条件有关在 eventListener 和 Mithrils 绘制系统之间。

有没有人有自定义上下文菜单的经验，可以提供给我一些示例？

非常感谢，斯特凡

编辑： 至于 Barneys 关于 m.startComputation() 的评论，我将代码更改为以下内容：

var table = m("table", ctrl.sorts(ctrl.items()), [
m("tr", [ m("th", {
    oncontextmenu : ctrl.onContextMenu(ctrl.contextMenuId, "context-menu context-menu-bkg", "hide" )
}, "S"), m("th[data-sort-by=pName]", "Name"),
m("th[data-sort-by=pSize]", "Size"), 
m("th[data-sort-by=pPath]", "Path"), 
m("th[data-sort-by=pMedia]", "Media") ]), 
ctrl.items().map(function(item, idx) {
    return m("tr", ctrl.initRow(item, idx), {
        key : item.guid
    }, [ m("input[type=checkbox]", {
        id : item.guid,
        checked : ctrl.isSelected(item.guid),
        onclick : function(e) {
            console.log("1000")
            ctrl.setSelected(this.id);
        }
    }), m("td", item.pName), m("td", utils.numberWithDots(item.pSize)), 
    m("td", item.pPath), m("td", item.pMedia) ])
}) ])

以及onContextMenu的实现函数：

// open a context menu
// @elementId   the id of the element which resembles the context menu.
//              Usually this is a div.
// @classShow   the name of the css class for showing the menu
// @classHide   the name of the css class for hiding the menu
vmc.onContextMenu = function(elementId, classShow, classHide) {
    var callback = function(e) {
        console.log("3010" + this)
        var contextmenudiv = document.getElementById(elementId);
        contextmenudiv.className = classHide;
        document.removeEventListener("click", callback, false);
        document.removeEventListener("keydown", callback, false);
    }
    return function(e) {
        console.log("3000" + this)
        var contextmenudiv = document.getElementById(elementId);
        // Prevent the browser from opening the default context menu
        e.preventDefault();
        var coords = utils.getCoords(e);
        contextmenudiv.style.left = coords[0] + "px";
        contextmenudiv.style.top = coords[1] + "px";
        // Display it
        contextmenudiv.className = classShow;
        // When you click somewhere else, hide it
        document.addEventListener("click", callback, false);
        document.addEventListener("keydown", callback, false);
    }
};

现在可以正常工作了。巴尼，如果你能确认这是一个可行的方法，我会 post 它作为答案。

谢谢斯特凡

Answer 1

这是一个可行的解决方案：

var table = m("table", ctrl.sorts(ctrl.items()), [
    m("tr", [ m("th", {
        oncontextmenu : ctrl.onContextMenu(ctrl.contextMenuId, "context-menu  context-menu-bkg", "hide" )
    }, "S"), m("th[data-sort-by=pName]", "Name"),
    m("th[data-sort-by=pSize]", "Size"), 
    m("th[data-sort-by=pPath]", "Path"), 
    m("th[data-sort-by=pMedia]", "Media") ]), 
    ctrl.items().map(function(item, idx) {
        return m("tr", ctrl.initRow(item, idx), {
            key : item.guid
    }, [ m("input[type=checkbox]", {
            id : item.guid,
            checked : ctrl.isSelected(item.guid),
            onclick : function(e) {
                console.log("1000")
            ctrl.setSelected(this.id);
        }
    }), m("td", item.pName), m("td", utils.numberWithDots(item.pSize)), 
    m("td", item.pPath), m("td", item.pMedia) ])
}) ])

以及onContextMenu的实现函数：

// open a context menu
// @elementId   the id of the element which resembles the context menu.
//              Usually this is a div.
// @classShow   the name of the css class for showing the menu
// @classHide   the name of the css class for hiding the menu
vmc.onContextMenu = function(elementId, classShow, classHide) {
    var callback = function(e) {
        console.log("3010" + this)
        var contextmenudiv = document.getElementById(elementId);
        contextmenudiv.className = classHide;
        document.removeEventListener("click", callback, false);
        document.removeEventListener("keydown", callback, false);
    }
    return function(e) {
        console.log("3000" + this)
        var contextmenudiv = document.getElementById(elementId);
        // Prevent the browser from opening the default context menu
        e.preventDefault();
        var coords = utils.getCoords(e);
        contextmenudiv.style.left = coords[0] + "px";
        contextmenudiv.style.top = coords[1] + "px";
        // Display it
        contextmenudiv.className = classShow;
        // When you click somewhere else, hide it
        document.addEventListener("click", callback, false);
        document.addEventListener("keydown", callback, false);
    }
};

现在上下文菜单在 mithrils 渲染周期之外，不再有竞争条件。此外，用于隐藏菜单的点击事件附加到文档，不会与 mithril 附加的点击处理程序发生冲突。

使用 Firefox 38.01 测试

如何在 Mithril 中集成自定义上下文菜单

How to integrate custom context menus in Mithril

mithril.js