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 cannot read data-* properties from select elements.}

Answer 2

首先： 如果你想在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);
    }
});

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

使用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为您提供了单击的元素。在某些情况下，这可能是您设置处理程序的元素的子元素。

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

以下是示例： http://currenttarget.meteor.com/

Answer 3

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

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

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

3 个答案: