从流星事件中检索自定义数据属性的最佳方法?

朱利安·莱瑞(Julien Leray):

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

例如:

article.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>

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

编辑:添加更多代码

编辑2:

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方法:

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

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

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元素读取属性

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章