Javascript 从 Meteor 事件中检索自定义数据属性的最佳方法？

Best way for retrieve custom data attribute from event in Meteor?

提问by Julien Leray

I was wondering what is the best way for retrieve the value of a custom data HTML attribute with Meteor from event object?

我想知道从事件对象中使用 Meteor 检索自定义数据 HTML 属性值的最佳方法是什么？

eg:

例如：

articles.html

文章.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

文章.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 data-idattribute value in the event handler?

如何data-id在事件处理程序中获取属性值？

EDIT: Add more code

编辑：添加更多代码

EDIT2:

编辑2：

console.log(event.target.categ)

output:

输出：

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

回答by undefined

DOM elements (HTMLElementobjects) don't have .data()method. .data()method belongs to jQuery objects. If you are using jQuery you should wrap the element with jQuery constructor then use the .datamethod:

DOM 元素（HTMLElement对象）没有.data()方法。.data()方法属于 jQuery 对象。如果您使用 jQuery，则应该使用 jQuery 构造函数包装元素，然后使用以下.data方法：

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

Another option is using .datasetproperty ¹:

另一种选择是使用.dataset属性¹：

event.target.categ.dataset.id;

Or .getAttribute()method:

或.getAttribute()方法：

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

update:

更新：

You should also select the selected option before using datasetproperty.

您还应该在使用dataset属性之前选择选定的选项。

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 selectelements.}

^{1. IE10及以下部分支持该属性。Android 2.3 无法data-*从select元素读取属性。}

回答by Daniel Budick

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

首先：如果你想在meteor中获取被选元素，你不需要jQuery。只需获取更改事件并使用 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);
    }
});

Secondly:To get the data of the element you should always use event.currentTarget.dataset.

其次：要获取元素的数据，您应该始终使用event.currentTarget.dataset.

By using event.target.datasetyou will get the wrong dataset in some cases.

event.target.dataset在某些情况下，通过使用你会得到错误的数据集。

E.g.:

例如：

<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 can be a child of the element you set the handler on.

event.target 给你元素，你点击。在某些情况下，这可以是您设置处理程序的元素的子元素。

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

event.currentTarget 始终返回您设置处理程序的元素。

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

这是示例：http: //currenttarget.meteor.com/

回答by chrisarton

Looks like you are trying to get the data-id of the currently selected option, try this if you are using jquery:

看起来您正在尝试获取当前所选选项的数据 ID，如果您使用的是 jquery，请尝试此操作：

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