jQuery OO événement contraignant

Question

Fondamentalement, j'ai un objet:

function tomatoe(name, owner) { 
    $('<div>').click(this.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name); 

    this.name = name; 
    this.dead = false; 
    this.owner = owner; 
    this.squish = function() { 
     console.log('Oh my Google, you killed ' + this.name + '!'); 
     this.dead = true; 
     this.owner.sad = true; 
    }; 
} 

La fonctionnalité est assez simple. Une fois instanciée, créez une div, attachez-y un gestionnaire de clic et agrafez-la sur quelque chose. À l'instanciation, deux paramètres sont passés: un nom et un propriétaire. Le propriétaire est une référence à un autre objet.

Il y a deux problèmes avec ce code:

1. La cette référence dans la fonction Ecraser est brisé, car il se réfère maintenant à l'élément cliqué.
2. En raison du chaînage, lors de la connexion de l'événement, "this" fait référence à jQuery ou à l'élément div nouvellement créé (pas encore sûr), donc ce.squish n'est pas défini et n'est jamais appelé.

Si cela aide d'une manière quelconque, l'objet propriétaire a une référence à toutes les tomates.

Answer 1

Vous voulez réaffecté this à un autre variable de sorte que la dénomination ne se heurte pas. C'est aussi une bonne idée de créer la div après avoir instancié toutes les variables.

function tomatoe(name, owner) { 
    var that = this; 

    that.name = name; 
    that.dead = false; 
    that.owner = owner; 
    that.squish = function() { 
     console.log('Oh my Google, you killed ' + that.name + '!'); 
     that.dead = true; 
     that.owner.sad = true; 
    }; 

    $('<div>').click(that.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name); 

} 

Answer 2

essayez ceci:

function tomatoe(name, owner) { 

    //make a reference to this with self 
    var self = this; 

    $('<div>').click(self.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name); 

    this.name = name; 
    this.dead = false; 
    this.owner = owner; 
    this.squish = function() { 
     console.log('Oh my Google, you killed ' + this.name + '!'); 
     this.dead = true; 
     this.owner.sad = true; 
    }; 
} 

ce que je ferais si vous voulez chanability:

var tomato = { 
    name: null, 
    dead: null, 
    owner: null, 

    init: function(name, owner){ 
      var self = this; 
      $('<div>').click(self.squish) 
       .appendTo(myElement).text('I\'m a happy tomatoe called ' + name); 
      this.name = name; 
      this.dead = false; 
      this.owner = owner; 
      return this; 
    }, 

    squish: function(){ 
      console.log('Oh my Google, you killed ' + this.name + '!'); 
      this.dead = true; 
      this.owner.sad = true; 
      return this; 
    } 

} 

//to instantiate it: 
tomato.init(name, owner); 

Answer 3

Vous devez placer la ligne jQuery après l'affectation this.squish! Il est évidemment indéfini, jusqu'à ce que vous lui assigniez une valeur.

function tomatoe(name, owner) { 

    var that = this; 

    this.name = name; 
    this.dead = false; 
    this.owner = owner; 
    this.squish = function() { 
     console.log('Oh my Google, you killed ' + that.name + '!'); 
     that.dead = true; 
     that.owner.sad = true; 
    }; 

    $('<div>').click(this.squish).appendTo(myElement) 
       .text('I\'m a happy tomatoe called ' + name); 

} 

Answer 4

Eh bien, la meilleure façon de faire ce que vous voulez faire est de créer une variable locale pour stocker une référence à l'objet tomatoe comme ceci:

function tomatoe(name, owner) { 
    var _this = this; 
    $('<div>').click(this.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name); 

    this.name = name; 
    this.dead = false; 
    this.owner = owner; 
    this.squish = function() { 
    console.log('Oh my Google, you killed ' + _this.name + '!'); 
    _this.dead = true; 
    _this.owner.sad = true; 
    }; 
}