Я не могу закрыть диалог в 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) При нажатии кнопки ОК, я хочу: а) Удалить мой текущий граф и б) Закройте мой диалог

2) при нажатии кнопки Отмены Я хочу: Закрыть мой диалог (в моем первоначальном варианте работал successfylly с 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

я решил мою проблему таким образом, и я просто хочу поделиться им со всеми вами как ссылкой.

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

Answer 2

Третий аргумент в dialog.on - это контекст, переданный в функцию обратного вызова (второй аргумент). В нем говорится, что связывается с this в функции обратного вызова. В вашем примере не указано, где определяется , если это действительно 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(); 

если определяется на this:

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