Best way to get user data attribute from event in Meteor?

Question

I was wondering what is the best way to get the value of the HTML attribute of user data using Meteor from an event object?

eg:

articles.html

<template name="createArticle"> <form class="new-article"> <input type="text" name="title" placeholder="New title"/> <input type="text" name="content" placeholder="New content" /> <!-- list categ --> <label>Category <select id="categ-list" name="categ"> {{#each categories}} <option value="{{name}}" data-id={{_id}}>{{name}}</option> {{/each}} </select> </label> <input type ="submit" value= "Create" class="button"> </form> </template> 

articles.js

  Template.createArticle.events({ "submit .new-article": function(event){ var title = event.target.title.value; var content = event.target.content.value; var categName = event.target.categ.value; var categId = event.target.categ.data('id'); // HERE console.log("test " + categId); Meteor.call("addArticle", title, content, categId, categName); event.target.title.value = ""; event.target.content.value = ""; return false; }, "click #categ-list": function(event){ console.log('click'); } }); 

How can I get the value of the data-id attribute in an event handler?

EDIT: add more code

EDIT2:

 console.log(event.target.categ) 

exit:

 <select id="categ-list" name="categ"> <option value="test" data-id="p5zKaEbEiRkQjCkGg">test</option> <option value="test1" data-id="okPY6oyeXiFR7M3jd">test1</option> </select> 

Answer 1

DOM elements ( HTMLElement ) do not have a .data() method. .data() method belongs to jQuery objects. If you are using jQuery, you must wrap the element with a jQuery constructor, then use the .data method:

 $(event.target.categ).data('id'); 

Another option is .dataset property ¹ :

 event.target.categ.dataset.id; 

Or the .getAttribute() method:

 event.target.categ.getAttribute('data-id'); 

Update

You must also select the selected option before using the dataset property.

 var sel = event.target.categ; var categId = sel.options[sel.selectedIndex].getAttribute('data-id'); 

---

^{1. IE10 and below partially support the property. Android 2.3 cannot read data-* properties from select elements.}

Answer 2

It looks like you are trying to get the data id of the currently selected parameter, try this if you are using jquery:

 var categId = $(event.target.categ).find(':selected').data("id"); 

Answer 3

First of all: If you want to get the selected item in a meteor, you do not need jQuery. Just take the change event and get the data using JavaScript:

 Template.show.events({ 'change #options': function (event) { var currentTarget = event.currentTarget; console.log('Selected Value: ' + currentTarget.options[currentTarget.selectedIndex].value); console.log('Selected data: ' + currentTarget.options[currentTarget.selectedIndex].dataset.id); } }); 

Second: To get the item data, you should always use event.currentTarget.dataset .

Using event.target.dataset , you will get the wrong data set in some cases.

eg:.

 <template name="show"> <div class="target" data-id="1"> <h1>Category with id 1</h1> <div class="anotherTarget" data-id="15"> Object with id 15 </div> </div> </template> if (Meteor.isClient) { Template.show.events({ 'click .target': function (event) { var currentTarget = event.currentTarget.dataset; var target = event.target.dataset; console.log(`CurrentTarget: $(currentTarget.id)`); console.log(`Target: $(target.id)`); } }); } 

event.target gives you the element you clicked on. In some cases, this may be a child of the element on which the handler is installed.

event.currentTarget always returns the element on which you set the handler.

Here is an example: http://currenttarget.meteor.com/