Meteor.call이 sweetalert 확인 상자에서 작동하지 않습니다.

Question

내 앱에서 인턴 메시지를 삭제하는 이벤트가 있습니다. 바로 앞에 버튼이 있으며 메서드를 호출하는 클릭 이벤트가 있습니다. 모든 것이 잘 작동합니다.

하지만이 메서드를 호출하기 전에 확인 상자가 나타납니다. "이 메시지를 삭제 하시겠습니까?"

표준 확인 js 기능을 사용하면 정상적으로 작동합니다. 하지만 표준 js confirmbox ... 스타일링은 허용되지 않습니다.

그래서 내 생각은 sweetalert를 사용하는 것이었다 : 모든 상자 버전 & sweetalert 버전 및 방법을 확인, 내 이벤트 아래

.. 어떤 메시지가 삭제되지 않습니다뿐만 아니라 잘 berts 알림을 이동하지만.

감사합니다.

확인 상자 버전

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

방법

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

Answer 1

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