Meteor.call 不能在 sweetalert 确认框中工作

Question

我有一个事件可以删除我的应用程序中的实习生消息：前面有一个按钮，带有一个调用方法的点击事件。一切正常。

但是在方法调用之前，我想要一个确认框"Are you sure you want to delete this message ?"

使用标准的确认js功能，效果很好。但是标准的 js 确认框...不允许样式。

所以我的想法是使用 sweetalert：一切顺利，berts 通知也是如此，但没有消息被删除..

在我的活动下方，确认box版本&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'
                    });
                }
            });
        }
    }
});

甜蜜版

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

方法

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

Answer 1

原生window.confirm()是同步的，会阻塞JS线程执行。这意味着一旦用户响应提示，它就会返回一个值并从该点继续执行。这就是您可以成功使用 this._id 的原因。

使用异步 API 例如 swal2's, which uses promises, you pass a function to handle it once it is resolved or rejected (what you pass to then). In those callbacks, this no longer points to the original object, so you need to preserve access to it (or to other required data) by using a closure or by lexically binding it with an 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) {
        // ...
      });
    })
  }
});

Meteor.call 不能在 sweetalert 确认框中工作

Meteor.call don't work inside sweetalert confirmation box

meteor

sweetalert