Meteor.call funktioniert nicht in sweetalert Bestätigungsfeld

Question

Ich habe ein Ereignis zu löschen interne Nachrichten in meiner App: eine Schaltfläche vor, mit einem Klick-Ereignis, die eine Methode aufrufen. Alles funktioniert gut.

Aber vor dem Aufruf der Methode möchte ich eine Bestätigungsbox "Sind Sie sicher, dass Sie diese Nachricht löschen möchten?"

Mit der Standard-Funktion bestätigen js, funktioniert gut. Aber der Standard js confirmbox ... Kein Styling erlaubt.

So war meine Idee sweetalert zu verwenden: alles gut gehen, die berts Meldungen als gut, aber keine Meldung gelöscht wird ..

unter meinem Fall, Box-Version & sweetalert Version bestätigen, und die Methode.

Danke!

bestätigen Box-Version

Template.Users.events({ 
    'click .toggle-admin': function() { 
     Meteor.call('toggleAdmin', this._id); 
    }, 
    'click button.delete-message':function() { 
     if(confirm('Are you sure?')) { 
      Meteor.call('deleteMessage', this._id, function(error) { 
       if(error) { 
        Bert.alert({ 
         title: 'Error', 
         message: error.reason, 
         type: 'danger' 
        }); 
       } else { 
        Bert.alert({ 
         title: 'Success', 
         message: 'Message deleted.', 
         type: 'success' 
        }); 
       } 
      }); 
     } 
    } 
}); 

sweetalert Version

Template.Users.events({ 
    'click .toggle-admin': function() { 
     Meteor.call('toggleAdmin', this._id); 
    }, 
    'click button.delete-message':function() { 
     swal({ 
      title: "Are you sure?", 
      text: "You will not be able to recover this message!", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes, delete it!" 
     }).then(function(){ 
      Meteor.call('deleteMessage', this._id, function(error) { 
       if(error) { 
        Bert.alert({ 
         title: 'Error', 
         message: error.reason, 
         type: 'danger' 
        }); 
       } else { 
        Bert.alert({ 
         title: 'Success', 
         message: 'Message deleted.', 
         type: 'success' 
        }); 
       } 
      }); 
     }) 
    } 
}); 

Methode

Meteor.methods({ 
    insertMessage: function(message) { 
     ContactMessages.insert(message); 
    }, 
    deleteMessage: function(messageId) { 
     ContactMessages.remove({_id: messageId}); 
    } 
}); 

Answer 1

Die nati ve window.confirm() ist synchron und blockiert den JS-Thread der Ausführung. Dies bedeutet, dass sobald der Benutzer auf die Eingabeaufforderung reagiert, ein Wert von ihm zurückgegeben wird und die Ausführung ab diesem Zeitpunkt fortgesetzt wird. Das ist der Grund, warum Sie erfolgreich this._id verwenden können.

Mit einer asynchronen API wie swal2, die Versprechungen verwendet, übergeben Sie eine Funktion, um es zu behandeln, sobald es aufgelöst oder zurückgewiesen wird (was Sie an then übergeben). In diesen Callbacks zeigt this nicht mehr auf das ursprüngliche Objekt. Daher müssen Sie den Zugriff darauf (oder auf andere erforderliche Daten) beibehalten, indem Sie eine Closure verwenden oder sie lexikalisch an eine arrow function binden.

Mit einem Verschluss:

Template.Users.events({ 
    'click button.delete-message'() { 
    const id = this._id; 
    swal({ 
     // ... 
    }).then(function(){ // `id` is available from external function 
     Meteor.call('deleteMessage', id, function(error) { 
     // ... 
     }); 
    }) 
    } 
}); 

lexikalischen Gültigkeitsbereich einen Pfeil Funktion Bindung mit:

Template.Users.events({ 
    'click button.delete-message'() { 
    swal({ 
     // ... 
    }).then(() => { //bound to the current `this` 
     Meteor.call('deleteMessage', this._id, function(error) { 
     // ... 
     }); 
    }) 
    } 
});