Meteor.callはsweetalertの確認ボックス内で動作しません

Question

私のアプリでインターンメッセージを削除するイベントがあります：メソッドを呼び出すクリックイベントを含むボタンが前面にあります。すべてうまく動作します。

しかし、このメソッドを呼び出す前に、「このメッセージを削除してもよろしいですか？

標準の確認js機能を使用すると、正常に動作します。しかし、標準のjs confirmbox ...スタイリングは許可されていません。

だから私のアイデアはsweetalertを使用していた：すべては、同様のBERT通知、うまく行くが、何のメッセージは削除されません。..

私のイベントの下には、ボックス版& sweetalertバージョン、および方法を確認します。

ありがとうございます！

確認ボックスバージョン

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バージョン

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

方法

Answer 1

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

NATI ve window.confirm()は同期しており、JSスレッドの実行をブロックします。つまり、ユーザーがプロンプトに応答すると、ユーザーはプロンプトに値を返し、そのポイントから実行を続行します。そのため、this._idを正常に使用することができます。

約束を使用するswal2のような非同期APIを使用すると、解決または却下された（thenに渡す）機能を渡します。これらのコールバックでは、thisはもはや元のオブジェクトを指していないので、クロージャを使用するか、またはarrow functionで字句的にバインドして、そのオブジェクトへのアクセス（または他の必要なデータ）を保持する必要があります。

クロージャを使用：

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) { 
     // ... 
     }); 
    }) 
    } 
}); 

レキシカルスコープは、矢印の機能を使用してバインディング：

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