Ich kann Dialog nicht schließen in JointJS

Question

Here is and a screenshot I uploaded for you Ich habe meinen Beitrag, nach Ihren Ratschlägen in den Kommentaren, meine aktualisierte Version meines Codes. Ich schließe in/**/meinem ursprünglichen Beitrag für die Hilfe.

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

Hier ist mein aktualisierter Code, der leider immer noch nicht wie erwartet funktioniert. Ich erinnere Sie daran, dass in dieser Dialogform, die ein OK zeigt und Abbrechen-Taste I die folgenden ein mag:

1) Wenn die OK-Taste Ich mag: a) Löschen meine aktuellen Graphen Und b) Schließen Sie meinen Dialog

2) Wenn auf Abbrechen ich möchte: meinen Dialog schließen (was in meiner ersten Version successfylly mit dialog.close arbeitete)

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

diesen neuen Code mit meinem joinjtJS Projekt unerwartet abstürzt. Wie mache ich bitte OK-Taste?

Answer 1

ich mein Problem auf diese Weise gelöst, und ich will nur um es mit euch allen als Referenz zu teilen.

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

Das dritte Argument in dialog.on ist der in die Callback-Funktion übergebene Kontext (2. Argument). Er sagt, was in der Callback-Funktion an this gebunden ist. In Ihrem Beispiel ist nicht klar, wo die definiert ist, wenn es wirklich this.graph ist. Allerdings können Sie tun, es ist einfach wie im folgenden Beispiel, ohne den Kontext zu übergeben:

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

wenn die auf this definiert:

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