从Meteor中的事件中检索自定义数据属性的最佳方法？ [英] Best way for retrieve custom data attribute from event in Meteor?

问题描述

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

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

例如：

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

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

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

编辑：添加更多代码

EDIT2：

console.log(event.target.categ)

输出：

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

推荐答案

DOM元素（ HTMLElement 对象）没有 .data（）方法。 .data（） 方法属于jQuery对象。如果你使用的是jQuery，你应该用jQuery构造函数包装元素，然后使用 .data 方法：

DOM elements (HTMLElement objects) 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 .data method:

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

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

event.target.categ.dataset.id;

或 .getAttribute（） 方法：

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

更新：

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

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

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

---

^{1。 IE10及以下部分支持该属性。 Android 2.3无法从<$ c $中读取数据 - * 属性c>选择元素。}

---

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

这篇关于从Meteor中的事件中检索自定义数据属性的最佳方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！