web-dev-qa-db-fra.com

Le meilleur moyen de récupérer un attribut de données personnalisé d'un événement dans Meteor?

Je me demandais quel est le meilleur moyen de récupérer la valeur d'un attribut HTML de données personnalisé avec Meteor à partir d'un 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 d'attribut dans le gestionnaire d'événements?

EDIT: ajouter plus de code

EDIT2:

console.log(event.target.categ)

production:

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

Les éléments DOM ( HTMLElement objets) n'ont pas de méthode .data(). .data() La méthode appartient aux objets jQuery. Si vous utilisez jQuery, vous devez envelopper l'élément avec le constructeur jQuery, puis utilisez la méthode .data:

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

Une autre option utilise la propriété .dataset 1:

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 la propriété dataset.

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

1. IE10 et les versions antérieures prennent en charge partiellement la propriété. Android 2.3 ne peut pas lire les propriétés data-* Des éléments select.

37
undefined

Tout d'abord: Si vous voulez obtenir l'élément sélectionné dans météore, vous n'avez pas besoin de jQuery. Prenez simplement l'événement change et obtenez 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, vous devez toujours utiliser event.currentTarget.dataset.

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

Par exemple.:

<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 vous donne l'élément, vous avez cliqué sur. Dans certains cas, cela peut être un enfant de l'élément sur lequel vous définissez le gestionnaire.

event.currentTarget renvoie toujours l'élément sur lequel vous définissez le gestionnaire.

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

4
Daniel Budick

On dirait que vous essayez d'obtenir l'ID de données de l'option actuellement sélectionnée, essayez ceci si vous utilisez jquery:

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