JQuery eşdeğeri MooTools bind (this)

Question

Bu class plugin kullanarak JQuery'de bir Mootools tooltip sınıfını yeniden yazmaya çalışıyorum. Sınıfım başlatıldığında, araç ipucunu sönecek bir hedef dinleyiciye bir etkinlik dinleyicisi ekliyorum.

Geri arama durumunda JQuery, "this" anahtar sözcüğünü olayın hedefine atar, böylece sınıfın özelliklerine bir başvuru tutmak için sınıf örneğini ifade etmek üzere "this" öğesini ayarlamak için apply() kullanıyorum). Bu, Mootools'un kullanışlı bind() işlevinin JQuery'deki karşılığıdır.

Uyguladığım zaman ne yazık ki apply() işlevini kullandığımda geri arama parametresini kaybediyorum. Örneğin, bu satırda ikinci satırda bir "e tanımsız" hatası alıyorum.

this.target.bind('click', function(e){ 
    e.preventDefault(); 
    var tip = this.opts.tip; 
    tip.fadeOut(500, function(){ 
     tip.bind('click', function(){ 
      showing = false; 
     }) 
    }); 
}.apply(this)) 

Burada bir numara eksik mi? Herkes bu konuda bir yol biliyor mu?

Teşekkür Fred

Answer 1

işaret eden bir hedef özelliğine sahip olmalıdır

TBH, aradığınız gibi mootools.bind, ES5'te sadece Function.bind'dur ve doğal olarak js 1.8.5 + spesifikasyonunu destekleyen tarayıcılarda kullanılabilir. MooTools, henüz sahip olmayan tarayıcıları geliştirir, ancak yerel uygulamaların prototip üzerinde kalmasını sağlar - eğer mevcutsa.

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

kolaylıkla değilse mevcut doğal aa Function.prototype.bind dekoratör olarak bu uygulamaya ve kullanabilirsiniz Yukarıdaki örnekte söylediği gibi: Gördüğünüz gibi

// Function.prototype.bind polyfill 
if (!Function.prototype.bind) { 

    Function.prototype.bind = function(obj) { 
    if(typeof this !== 'function') // closest thing possible to the ECMAScript 5 internal IsCallable function 
     throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); 

    var slice = [].slice, 
     args = slice.call(arguments, 1), 
     self = this, 
     nop = function() {}, 
     bound = function() { 
      return self.apply(this instanceof nop ? this : (obj || {}), 
           args.concat(slice.call(arguments)));  
     }; 

    bound.prototype = this.prototype; 

    return bound; 
    }; 
} 

, bir biraz daha işin içinde basit .apply/.call

Göz önüne alınması gereken bir yöntem yoksa veya bunun yerine bir başvuru kaydedebilirsiniz. Örn.,

örn. Her neyse, bu fonksiyonun bağlayıcısından daha küçük bir alanı vardır. aynı zamanda tetikleme elemanı olarak (event.target === this) this'a doğru bir referans verir. Eğer bağlama birden Mootools-çekirdek çok daha sık bu modeli bulacaksınız - bağlama sıklıkla ihtiyaç vardır gerçi sınıf yöntemlerine, örneğin olayları atamak istediğinizde: Bu durumda

this.element.addEvents({ 
    click: this.showTip.bind(this), 
    mouseleave: this.hideTip.bind(this) 
}); 

bir referans 'kazandı tasarrufu http://api.jquery.com/jquery.proxy/

Answer 2

bazı elemanı üzerinde yapılan tüm olayları, (örneğin bunlardan biridir 'klik') o elementin

var $this = $(e.target); // $this will be the clicked element 

JSFiddle