Passage de paramètres dans l'épine Dorsale des événements de l'objet de l'épine dorsale de la vue

J'ai les événements suivants pour l'épine Dorsale de la Vue. Son produit - avec trois onglets ("Tous", "Top 3", "Top 5")

Je peux en quelque sorte passer un paramètre dans la déclaration de la méthode, de sorte qu'il est équivalent à celui-ci (ce qui ne fonctionne pas)?

events : {
    "click #top-all":          "topProducts(1)"
    "click #top-three":      "topProducts(2)"
    "click #top-ten":         "topProducts(3)"
},
topProducts(obj){
    //Do stuff based on obj value
}
InformationsquelleAutor papdel | 2011-10-19
  1. 79

    Vous pourriez mettre l'argument supplémentaire dans un attribut de données sur l'élément cliquable au lieu de cela, quelque chose comme ceci:

    <a id="top-all" data-pancakes="1">

    Et puis topProducts peut le comprendre lui-même:

    topProducts: function(ev) {
    var pancakes = $(ev.currentTarget).data('pancakes');
    //And continue on as though we were called as topProducts(pancakes)
    //...
}
    • "ce" points à l'épine Dorsale de Vue ici, donc en faisant un direct $(this) ne donnera pas l'élément DOM correspondant à l'élément cliqué.
    • Bon, désolé à ce sujet. Mais vous pouvez utiliser ev.target (où ev est le cas) à la place. Jetez un oeil à ma version fixe s'il vous plaît.
    • Merci, en général $(ev.cible) permet d'obtenir les dom élément qui a déclenché l'événement c'est donc très utile.
    • Ouais, ev.target (lorsque vous ne pouvez pas compter sur this) combinées avec les données d'attributs est une excellente façon de garder une trace des choses.
    • Comment les événements de hachage ressembler pour que cela fonctionne?
    • @whistler: { 'click #top-all': 'topProducts', 'click #top-three': 'topProducts', ... }.
    • N'est-il pas exister un moyen qui se trouve dans jquery pour gérer les événements ? .eventName( [eventData ], handler(eventObject) )
    • Je ne suis pas sûr de ce que tu veux dire. Voulez-vous dire x.click(...) ou tel? Vous permettra de le Backbone de gérer les événements par le biais de la délégation.
    • Est-il la meilleure solution pour cela? Il semble fou de moi que vous ne pouvez pas facilement passer des paramètres à ces événements de fonctions. Est-il une bonne raison, je ne vois pas?
    • Vous pourriez mettre des fonctions (plutôt que des noms) dans events mais c'est juste brouiller les choses.
    • essayez la réponse ci-dessous: arguments[0].currentTarget.id et vous n'avez pas besoin de manipuler le DOM avec une les données d'attribut.
    • Puis-je simplement dire, c'est bêtement complexe pour quelque chose qui devrait être extrêmement simple. Moins de 5 points par les créateurs de backbone.js.

    InformationsquelleAutor mu is too short
  2. 38

    Je préfère en général faire quelque chose comme ceci:

    events : {
   "click #top-all":    function(){this.topProducts(1);}
   "click #top-three":  function(){this.topProducts(2);}
   "click #top-ten":    function(){this.topProducts(3);}
},
topProducts(obj){
   //Do stuff based on obj value
}
    • vous êtes mon héros
    • Parfois, vous oubliez juste de la puissance de javascript peut-être .... excellent travail!
    • Génial trucs !!
    • La plus simple est souvent le mieux. Je l'aime!
    InformationsquelleAutor Dre
  3. 9

    Ce que vous pouvez faire, c'est vérifier l'id de l'élément qui est reçu comme currentTarget dans les arguments.

    topProduct: function (e) {
    var id = e.currentTarget.id;
    if (id == "top-all") //Do something
    else if (id == "top-5") //Do something
    else if (id == "top-3") //Do something
}
    • C'est en fait mieux que la réponse sélectionnée comme il ne nécessite aucune modification du DOM.
    • Cette réponse est de loin meilleure que l'ajout d'un inutile données d'attribut.
    • Si vous souhaitez obtenir la classe à utiliser e.currentTarget.className au lieu de e.currentTarget.id. Aussi, il y a beaucoup de propriétés intéressantes à l'intérieur de e objet!
    • Si vous regardez l'exemple donné par l'OP, il y a un Id mentionné sur tous les éléments sur lesquels les gestionnaires de clic sont attachés. Je suis d'accord avec vous sur des propriétés intéressantes sur l'objet de l'événement.
    InformationsquelleAutor sachinjain024
  4. 3

    Vous pouvez le faire à l'aide de fermetures:

    EventObject.on(event, (function(){
    var arg = data; //Closure preserves this data
    return function(){
        doThis(arg);
    }   
})());
    InformationsquelleAutor Yusuf Bhabhrawala