jQuery OO Event-привязка

Question

По сути, у меня есть объект:

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

Функциональность довольно проста. При создании экземпляра создайте div, прикрепите к нему обработчик щелчка и прикрепите его к чему-либо. После создания передаются два параметра: имя и владелец. Владелец является ссылкой на другой объект.

Есть две проблемы с этим кодом:

1. Ссылка this в функции squish не работает, поскольку теперь она относится к нажатому элементу.
2. Из-за цепочки при фактическом присоединении события «this» относится либо к jQuery, либо к вновь созданному элементу div (пока не уверен, какой именно), поэтому this.squish не определен и никогда не вызывается.

Если это помогает, объект-владелец имеет ссылку на все помидоры.

Answer 1

Вы хотите переназначить this другой переменной, чтобы именование не конфликтовало. Также неплохо создать div после создания всех переменных.

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

Вы должны поместить строку jQuery после назначения this.squish! Очевидно, он не определен, пока вы не назначите ему значение.

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 3

Ну, самый простой способ сделать то, что вы хотите сделать, это создать локальную переменную для хранения ссылки на объект tomatoe, например:

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

Answer 4

попробуйте это:

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

что бы я сделал, если бы вы хотели изменчивости:

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