javascript - 我无法关闭 jointJS 中的对话框

Question

Here is and a screenshot I uploaded for you我已经根据您在评论中的建议编辑了我的帖子，发布了我的代码更新版本。为了帮助您，我将我的原始帖子附在/**/中。

/*In jointJS I try using a `ui.dialog` to delete all my graph with the following code:

    var dialog = new joint.ui.Dialog({
                width: 400,
                title: 'Create new process',
                content: '<b>Cleanup current drawing?</b>',
                closeButton: false,
                buttons: [
                    { action: 'ok', content: 'OK' },
                    { action: 'cancel', content: 'CANCEL' }
                ]
            });

            dialog.on('action:ok', this.graph.clear, this.graph);
            dialog.on('action:cancel', dialog.close, dialog);
            dialog.open();
        },

After pressing OK button I successfully delete my graph but my dialog still remains without being able to delete it.

Any help please? */

这是我更新后的代码，不幸的是它仍然不能按预期工作。我提醒您，在这个显示“确定”和“取消”按钮的对话框中，我需要以下按钮:

1) 当按下 OK 我想:a)删除我当前的图表并且b)关闭我的对话框

2) 当按下取消时我想:关闭我的对话框(在我的初始版本中使用 dialog.close 成功运行)

openNew: function() {
        // By pressing Create New Process button, a popup form asks for 
        //our confirmation before deleting current graph
        var dialog = new joint.ui.Dialog({
            width: 400,
            title: 'Create new process',
            content: '<b>Cleanup current drawing?</b>',
            closeButton: false,
            buttons: [
                { action: 'ok', content: 'OK' },
                { action: 'cancel', content: 'CANCEL' }
            ]
        });

        //Since in 'action:ok' of dialog.on the 3rd parameter is used in the
        //callback of multi_hand we must pass dialog and graph both together.To do so
        //we enclose them in an object named together and we pass it instead

        together= {dialog : dialog, graph : this.graph};

        //Since jointJS supports assigning multiple events for same handler
        //BUT NOT multiple handlers for the same event we create function multi_hand
        multi_hand: function (together)
        {  
          together.graph.clear(); 
          together.dialog.close();
        }
        dialog.on('action:ok', multi_hand, together);
        dialog.on('action:cancel', dialog.close, dialog);
        dialog.open();
    }, 

通过使用这个新代码，我的 joinjtJS 项目意外崩溃。请问我如何使 OK 按钮起作用？

Answer 1

dialog.on 中的第三个参数是传递给回调函数的上下文(第二个参数)。它说，在回调函数中绑定(bind)到 this 的是什么。在您的示例中，不清楚 graph 的定义位置，如果它确实是 this.graph。但是，您可以像下面的示例一样简单地执行此操作，而无需传递上下文:

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 650,
    height: 400,
    model: graph,
    linkPinning: false
});

var r = new joint.shapes.basic.Rect({
    position: { x: 50, y: 50 },
    size: { width: 100, height: 40 },
}).addTo(graph);

var dialog = new joint.ui.Dialog({
    width: 400,
    title: 'Confirm',
    content: '<b>Are you sure?</b>',
    buttons: [
        { action: 'yes', content: 'Yes' },
        { action: 'no', content: 'No' }
    ]
});

dialog.on('action:yes', function() {
    graph.clear();
    dialog.close()
});

dialog.on('action:no', dialog.close, dialog);
dialog.open();

如果 graph 是在 this 上定义的:

dialog.on('action:yes', function() {
    this.graph.clear();
    dialog.close();
}, this);