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

Question

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

例如:

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在事件处理程序中获取属性值？

编辑:添加更多代码

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>

Answer 1

DOM元素(HTMLElement对象)没有.data()方法..data()方法属于jQuery对象.如果你使用的是jQuery,你应该用jQuery构造函数包装元素,然后使用.data方法:

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

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

event.target.categ.dataset.id;

或.getAttribute()方法:

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

更新:

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

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

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