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? */

这是我更新的代码，但遗憾的是仍未按预期工作。我提醒你，在这个显示OK和Cancel按钮的对话框中，我需要以下内容：

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中的第三个参数是传递给回调函数的上下文（第二个参数）。它说，回调函数中绑定到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);

Answer 2

我以这种方式解决了我的问题，我只想与大家分享一下作为参考。

openNew: function() {
    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:ok action:cancel', dialog.close, dialog);
        dialog.open();
    },

我无法在jointJS

2 个答案: