Question

我试图将自定义上下文菜单添加到页面中的某些元素并且确实如此它在包含表格的视图中是这样的。上下文菜单附有表头名为＆＃34; S＆＃34;：

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

现在这没有问题。巴尼，如果你能够确认这是一种可行的方式，我会把它作为答案发布。

谢谢，Stefan

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渲染周期，并且不再存在竞争条件。用于隐藏菜单的click事件也附加到文档中，并且不会与mithril附加的单击处理程序发生冲突。

使用Firefox 38.01测试

如何在Mithril

1 个答案: