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

【问题标题】：How to integrate custom context menus in Mithril如何在 Mithril 中集成自定义上下文菜单
【发布时间】：2015-05-13 13:38:05
【问题描述】：

我正在尝试将自定义上下文菜单添加到页面中的某些元素并做到了它在包含表格的视图中是这样的。上下文菜单附加到名称为“S”的表头：

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])              
}

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

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)
        }
    };  
};

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

使用调试器和一些断点并没有让我得到一些信息什么是除了有时一步一步运行调试器会导致自定义上下文菜单。所以我认为这与比赛条件有关在 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);
    }
};

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

谢谢，斯特凡

【问题讨论】：

您能尝试将代码减少到最少的测试用例吗？您的代码似乎没有任何问题，尽管 startComputation 以一种奇怪的方式使用 - 该代码的目的是在异步操作期间阻止和恢复重绘，但您正在同步使用它 - 可能是好吧，只需调用m.redraw，或者将事件绑定为onclick 和onkeydown 以及oncontextmenu（内联事件处理程序执行后秘银自动重绘）
FWIW 在这个简单的jsbin 中，我无法从oncontextmenu 中得到任何奇怪的行为
感谢您的链接，但它提供了一个如何加载模块的示例。
抱歉，我不知道这是怎么发生的：/ – 我找不到我编写的示例。不错的解决方案！

标签： mithril.js

【解决方案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);
    }
};

现在上下文菜单在秘银渲染周期之外，不再有竞争条件。隐藏菜单的单击事件也附加到文档中，并且不会与秘银附加的单击处理程序发生冲突。

用 Firefox 38.01 测试

【讨论】：