簡體   English   中英

我無法在jointJS中關閉對話框

[英]I can't close dialog in jointJS

這是我為你上傳的截圖,我根據你在評論中的建議編輯了我的帖子,發布了我的代碼的更新版本。我附上/ ** /我的原帖以幫助你。

/*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成功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按鈕工作?

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

我以這種方式解決了我的問題,我只想與大家分享一下作為參考。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM