Meilleure façon de récupérer des données personnalisées de l'attribut de l'événement dans le Météore?

Je me demandais quel est le meilleur moyen pour récupérer la valeur d'une coutume de données attribut HTML avec Météore objet d'événement?

par exemple:

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

Comment puis-je obtenir le data-id valeur de l'attribut dans le gestionnaire d'événement?

EDIT: Ajouter plus de code

EDIT2:

console.log(event.target.categ)

de sortie:

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

s'il vous plaît montrer l'ensemble de votre gestionnaire d'événement. Quel élément est l'événement à venir?

InformationsquelleAutor Julien Leray | 2015-06-06

javascript meteor

33

Des éléments du DOM (HTMLElement objets) n'ont pas .data() méthode. .de données() méthode appartient à jQuery objets. Si vous utilisez jQuery, vous devez envelopper l'élément avec jQuery constructeur puis utilisez le .data méthode:
```
$(event.target.categ).data('id');
```
Une autre option est d'utiliser .dataset propriété ¹:
```
event.target.categ.dataset.id;
```
Ou .getAttribute() méthode:
```
event.target.categ.getAttribute('data-id');
```
mise à jour:

Vous devez également sélectionner l'option sélectionnée avant d'utiliser dataset propriété.
```
var sel = event.target.categ;
var categId = sel.options[sel.selectedIndex].getAttribute('data-id');
```
^{1. IE10 et ci-dessous partiellement en charge la propriété. Android 2.3 ne peut pas lire data-* propriétés de select éléments.}
- Ce n' console.log(event.target.categ) spectacle?
- <select id="catég-liste" name="catég"> <option value="test" data-id="p5zKaEbEiRkQjCkGg"></option> <option value="test1" data-id="okPY6oyeXiFR7M3jd"></option> </select>
- J'ai trouvé le problème. Le select élément lui-même n'a pas data-id de la propriété, vous devez sélectionner les option avant d'utiliser la propriété.
- Merci, cela fonctionne. C'est vraiment le JS est détaillé pour ce genre de tâches btw!
- Vous êtes les bienvenus! Oui, c'est pourquoi les bibliothèques comme jQuery sont si populaires. Ce n'est pas faute de JavaScript. C'est DOM qui a de terrible dans l'Api.
- Pour ceux d'extrapoler cela à leur propre code, je devais prendre le categ pour le faire fonctionner. e.target.dataset.id
InformationsquelleAutor undefined

Tout d'abord:
Si vous souhaitez obtenir de l'élément sélectionné dans le météore, vous n'avez pas besoin de jQuery. Il suffit de prendre l'événement de changement et d'obtenir les données avec 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);
    }
});

Deuxièmement:
Pour obtenir les données de l'élément que vous devriez toujours utiliser event.currentTarget.dataset.

En utilisant event.target.dataset vous obtiendrez le mauvais jeu de données dans certains cas.

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

événement.cible vous donne l'élément sur lequel vous avez cliqué. Dans certains cas, cela peut être un enfant de l'élément que vous définissez le gestionnaire sur.

événement.currentTarget renvoie toujours l'élément que vous définissez le gestionnaire sur.

Voici l'exemple:
http://currenttarget.meteor.com/

InformationsquelleAutor Daniel Budick

2

Semble que vous essayez d'avoir le data-id de l'option actuellement sélectionnée, à essayer si vous êtes à l'aide de jquery:
```
var categId = $(event.target.categ).find(':selected').data("id");
```
- Notez que la plaine de la version JavaScript va échouer.
- Merci pour vous aider, il travaille trop, je upvote vous, mais j'ai validé @Vohuman, désolé pour ça... (j'ai compris ce que tu veux dire par la méthode de réponse, mais il est un peu de l'échec, de données() devrait être remplacer par getAttribute() )
InformationsquelleAutor chrisarton

Vous devez vous connecter pour publier un commentaire.