Estoy dando mis primeros pasos con objetos js, similares a plugins de jquery por ejemplo.
Mi duda surge al definir un evento dentro de un objeto. El uso de this suele ser referencia al objeto en si. Pero si defino un evento click dentro del objeto que dispare un metodo de ese mismo objeto, ahí el this hará referencia al disparador del evento, no al objeto. Como acceder nuevamente al this que hace referencia al objeto entonces?
Vean el evento definido en el metodo init(), y la llamada a this.imageClicked(); dentro del manejo del evento. Esa llamada da error.
Código Javascript
:
Ver originalvar slideView = {
currentPosition : 0,
slidesContainer : null,
slides : null,
init : function()
{
// Remove scrollbar in JS
this.slidesContainer.css('overflow', 'hidden');
// Wrap all .slides with .slideInner div
this.slides.wrapAll('<div class="slideInner"></div>');
// Set #slideInner width equal to total width of all slides
this.slidesContainer.find('.slideInner').css({
'width': this.slideWidth() * this.numberOfSlides(),
'marginLeft' : this.innerMargin()
});
// Hide left arrow control on first load
this.manageTransparencies();
this.manageControls();
this.slides.bind('click', this.slideClicked );
},
slideWidth : function(){
slides = this.slides;
return j(slides.get(0)).outerWidth(true);
},
numberOfSlides : function(){
slides = this.slides;
return this.slides.length;
},
innerMargin : function(){
slideWidth = this.slideWidth();
return (windowsWidth-this.slideWidth())/2; // left margin
},
doSlide : function ()
{
// Move slideInner using margin-left
j('.slideInner').animate({
'marginLeft' : this.slideWidth()*(-this.currentPosition)
+this.innerMargin()
});
},
determineNewPosition: function (condition)
{
this.currentPosition = ( condition ) ? this.currentPosition+1 : this.currentPosition-1;
},
// manageControls: Hides and shows controls depending on currentPosition
manageControls: function ()
{
// Hide left arrow if position is first slide
if(this.currentPosition == 0){
j('.nav-left').fadeTo("slow", 0.33).addClass("disabled")
}
else{
j('.nav-left').fadeTo("fast", 1).removeClass("disabled")
}
// Hide right arrow if position is last slide
if(this.currentPosition == this.numberOfSlides()-1){
j('.nav-right').fadeTo("slow", 0.33).addClass("disabled")
}
else{
j('.nav-right').fadeTo("fast", 1).removeClass("disabled")
}
},
manageTransparencies : function ()
{
slides = this.slides;
slides.fadeTo("slow", 0.33).addClass("disabled");
currentImage = slides.get(this.currentPosition);
j(currentImage).fadeTo("fast", 1).removeClass("disabled");
},
slideClicked : function(e)
{
clickedImg = j(this);
fb(clickedImg);
fb(e);
if ( !clickedImg.hasClass('disabled') )
{
// TODO: fancybox o algo
this.imageClicked();
}
else
{
index = clickedImg.index(); // index of the slide in slides array
if ( index == currentView.currentPosition )
{
fb(index);
}
else
{
setCurrentShopView();
currentView.determineNewPosition( index > currentView.currentPosition );
currentView.manageControls();
currentView.manageTransparencies();
currentView.doSlide();
}
}
},
imageClicked : function()
{
fb("clicked");
}
}