Why is `this` undefined in a Blaze event handler?

Question

I'm stuck in a reply function to intern messages: the email reply-sending function works fine (if I choose manually in the code the to field), but I'm failing, when I choose the message to reply, to select automatically the email in the contact-messages collection (field email) with my Meteor.methods.

In few words :

• var to = "bob@bob.com" => ok
• var to = this.email => no value catched

Here below my event on the reply form submit and the method

Event (can't catch var to = this.email)

Template.ContactReplyModal.events({
    'click .send-message':function(e) {
        e.preventDefault();
        Meteor.call('replyMessage', this._id, function(error) {
            if(error) {
                Bert.alert({
                    title: 'Error',
                    message: error.reason,
                    type: 'danger'
                });
            } else {
                var to = this.email;
                var from = "my@mail.com";
                var subject = $('#reply-subject').val();
                var message = $('#reply-message').val();

                if(message != '' && subject != '') {
                    Meteor.call('sendEmailContact', to, from, subject, message, function (error) {
                        if(error) {
                            Bert.alert({
                                title: 'Error',
                                message: error.reason,
                                type: 'danger'
                            });
                        } else {
                            $('#reply-message').val('');
                            $('#reply-subject').val('');
                            Bert.alert({
                                title: 'Success',
                                message: 'Message sended.',
                                type: 'success'
                            });
                        }
                    });
                } else {
                    Bert.alert({
                        title: 'Error',
                        message: 'Message error.',
                        type: 'danger'
                    });
                }
            }
        });
    },
    //Close events for ContactReplyModal
    'click .close-login': ()=> {
        Session.set('nav-toggle-contactreply', '');
    },
    'click .modal-overlay-contactreply': ()=> {
        Session.set('nav-toggle-contactreply', '');
    }
});

Method (using here the replyMessage function)

//Contact Method
Meteor.methods({
    insertMessage: function(message) {
        ContactMessages.insert(message);
    },
    openMessage: function(messageId) {
        ContactMessages.update({_id: messageId}, {$set: {new: false}});
    },
    replyMessage: function(messageId) {
        ContactMessages.findOne({_id: messageId});
    },
    deleteMessage: function(messageId) {
        ContactMessages.remove({_id: messageId});
    }
});

---

EDIT

The bind of the variable email with an arrow function doesn't work.

So maybe it is an issue of capturing the variable?

I cant' read console.log (this); and console.log (this.email); says undefined.

Here below is my message collection.

"_id": "6c3478WugEajr6zaw",
  "name": "bob",
  "email": "bob@bob.com",
  "message": "This is a try.",
  "submitted": "2017-01-05T15:19:04.642Z",
  "new": true

I really don't understand, cause this below event works on the openMessage method (so the right message is correctly identified from the others)

//CLIENTSIDE  
  'click .open-message':function() {
            Meteor.call('openMessage', this._id, function(error) {
                if(error) {
                    Bert.alert({
                        title: 'Error',
                        message: error.reason,
                        type: 'danger'
                    });
                }
            });
        }

//SERVERSIDE

    Meteor.methods({
        insertMessage: function(message) {
            ContactMessages.insert(message);
        },
        openMessage: function(messageId) {
            ContactMessages.update({_id: messageId}, {$set: {new: false}});
        },
        replyMessage: function(message) {
            ContactMessages.findOne({_id: message});
        },
        deleteMessage: function(messageId) {
            ContactMessages.remove({_id: messageId});
        }
    });

---

EDIT 2

As asked, below the template & the js linked to. The method is already showed and an example of the data in collection too.

template (contact-reply.html)

<template name="ContactReply">
    <h3>Reply</h3>
    <h3>To: {{email}}</h3>
    <input class="form-control" type="text" name="reply-subject" id="reply-subject" placeholder="Subject"/>
    <br>
    <textarea class="form-control" name="reply-message" id="reply-message" rows="6"></textarea>
    <br>
    <button class="btn btn-success send-message">Send</button>

</template>


<template name="ContactReplyModal">
    <div class="contactreply-modal {{$.Session.get 'nav-toggle-contactreply'}}">
        <i class="fa fa-close close-login"></i>
        <h3>Send a reply</h3>
        {{> ContactReply}}
    </div>
    <div class="modal-overlay-contactreply"></div>
</template>

js of the template (contact-reply.js)

import './contact-reply.html';




Template.ContactReplyModal.events({
    'click .send-message':function(e) {
        e.preventDefault();
        console.log(this);
        Meteor.call('replyMessage', this._id, (error) => {
            if(error) {
                Bert.alert({
                    title: 'Error',
                    message: error.reason,
                    type: 'danger'
                });
            } else {
                console.log (this.email);
                const to = this.email;
                var from = "my@mail.com";
                var subject = $('#reply-subject').val();
                var message = $('#reply-message').val();

                if(message != '' && subject != '') {
                    Meteor.call('sendEmailContact', to, from, subject, message, (error) => {
                        if(error) {
                            Bert.alert({
                                title: 'Error',
                                message: error.reason,
                                type: 'danger'
                            });
                        } else {
                            $('#reply-message').val('');
                            $('#reply-subject').val('');
                            Bert.alert({
                                title: 'Success',
                                message: 'Message sended.',
                                type: 'success'
                            });
                        }
                    });
                } else {
                    Bert.alert({
                        title: 'Error',
                        message: 'Message error.',
                        type: 'danger'
                    });
                }
            }
        });
    },
    //Close events for ContactReplyModal
    'click .close-login': ()=> {
        Session.set('nav-toggle-contactreply', '');
    },
    'click .modal-overlay-contactreply': ()=> {
        Session.set('nav-toggle-contactreply', '');
    }
});

Answer 1

First, it is important to be sure that the data context is correct. Each element within the template is rendered with a certain data context. If you target them in a template event handler, the data context will be available to the handler via this.

If you target an element that is not rendered by the current template (e.g, rendered by a third-party library or belongs to a sub-template), it will not have a data contest, which is what causes your data context to be undefined).

Having that fixed, assuming the data context (the external function's this) is indeed what you expect in the event handler (i.e, has an email field), you need to make it available to the callback. You can capture it in a local variable and make it available in a closure or lexically bind it with an arrow function:

Template.ContactReplyModal.events({
    'click .send-message':function(e) {
        e.preventDefault();
        console.log(this); // to make sure that it is what you are expecting.
        Meteor.call('replyMessage', this._id, (e) => { // note the arrow function
            if(e) {
                // ...
            } else {
                const to = this.email;
                // ...
                if(message != '' && subject != '') {
                    Meteor.call('sendEmailContact', to, from, subject, message, (e) => {
                        if(e) {
                            // ...
                        } else {
                            // ...
                        }
                    });
                } else {
                    // ...
                }
            }
        });
    },
    // ...
});

However, it does not seem like a good idea to use multiple nested method calls. It would probably be better to do it all in a single method call.

Answer 2

You can not access the template variable in template events using this, you can access them by the 2nd parameter in your events, here is your code, hope it will work

Template.ContactReplyModal.events({
'click .send-message'(e, instance) {
e.preventDefault();
Meteor.call('replyMessage', this._id, function(error) {
    if(error) {
        Bert.alert({
            title: 'Error',
            message: error.reason,
            type: 'danger'
        });
    } else {
        var to = instance.email;
        var from = "my@mail.com";
        var subject = $('#reply-subject').val();
        var message = $('#reply-message').val();

        if(message != '' && subject != '') {
            Meteor.call('sendEmailContact', to, from, subject, message, function (error) {
                if(error) {
                    Bert.alert({
                        title: 'Error',
                        message: error.reason,
                        type: 'danger'
                    });
                } else {
                    $('#reply-message').val('');
                    $('#reply-subject').val('');
                    Bert.alert({
                        title: 'Success',
                        message: 'Message sended.',
                        type: 'success'
                    });
                }
            });
        } else {
            Bert.alert({
                title: 'Error',
                message: 'Message error.',
                type: 'danger'
            });
        }
    }
});

}, });