1

Here is and a screenshot I uploaded for you I have edited my post, according to your advice in comments, posting my updated version of my code.I enclose in /**/ my original post for helping 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? */

Here is my updated code which unfortunately still doesn't work as expected. I remind you that in this dialog form which displays an OK and Cancel button I want the following ones:

1)When pressing OK I want to : a)Delete my current graph And b)Close my dialog

2)When pressing Cancel I want to: Close my dialog (Which in my initial version worked successfylly with 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();
    },

By using this new code my joinjtJS project crashes unexpectedly. How will I make OK button work please?

4

2 回答 2

2

第三个参数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);
于 2016-08-08T06:24:08.450 回答
1

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

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();
    },
于 2016-08-11T15:18:29.940 回答