Cross referencing rendered DOM elements and their respective database documents


#1

Newb me again with a question about the best method for retrieving references for DOM elements and their corresponding database entries.
For example, in my checkin checkout app I need to be able to retrieve the database id for the employee which was clicked in a list so I can update his/her status boolean in the database.
When I use the following code:

Template.employeeList.events({
    'click img': function(){
        console.log("You clicked an indicator."  );
        var clickElement = event.Target;
        var clickOther = event.currentTarget;
        console.log(clickElement);
        console.log(clickOther);

    },
    'change textArea': function(){
        console.log("You have changed the text area.");
     }
 });

I receive the following output in console:


How badly have I screwed this up?
Thanks for all of your help!!


#2

Try console.log(this.data) or console.log(Blaze.getData())


#3

Getting an undefined and null respectively when using these logs.


#4

And you made your list something like this?

Template.employeeList.helpers({
    employees:function(){
        return Meteor.users.find();
    }
});
<template name="employeeList">
    {{#each employees}}
        <img src="{{profile.avatar}}">
    {{/each}}
</template>

#5
Template.employeeList.helpers({
  nameList: function() {
    var EmployeeListObj = EmployeeStatus.find().fetch();
    return EmployeeListObj;
  }
});

#6

I just wanted to update the thread here and post that I got it working by adding the ā€˜eā€™ parameter to my function:

Template.employeeList.events({
    'click img': function(e){
        //console.log("You clicked an indicator."  );
        console.log("This.data:",this._id);
        
    }

#7

all event handlers in meteor receive two arguments: the event and which template instance it happened in

Template.employeeList.events({
  'click img'(event, instance) {
    // instance.data will give you access to the data context
    // to get the actual DOM handle for the clicked img scope the $ to the instance
    var img = instance.$(event.currentTarget);
  },
});

#8

Thanks for the info Jam!