Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/11/2011, 09:06
Avatar de mayid
mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
this en el ambito de un objeto json, tras definir un evento click

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 original
  1. var slideView = {
  2.     currentPosition : 0,
  3.     slidesContainer : null,      
  4.     slides : null,      
  5.     init : function()
  6.     {
  7.        
  8.         // Remove scrollbar in JS
  9.         this.slidesContainer.css('overflow', 'hidden');
  10.        
  11.         // Wrap all .slides with .slideInner div
  12.         this.slides.wrapAll('<div class="slideInner"></div>');
  13.                
  14.         // Set #slideInner width equal to total width of all slides
  15.         this.slidesContainer.find('.slideInner').css({
  16.             'width': this.slideWidth() * this.numberOfSlides(),
  17.             'marginLeft' : this.innerMargin()
  18.         });
  19.        
  20.         // Hide left arrow control on first load
  21.         this.manageTransparencies();
  22.         this.manageControls();
  23.        
  24.         this.slides.bind('click', this.slideClicked );
  25.  
  26.     },
  27.     slideWidth : function(){
  28.         slides = this.slides;
  29.         return j(slides.get(0)).outerWidth(true);
  30.     },
  31.     numberOfSlides : function(){
  32.         slides = this.slides;
  33.         return this.slides.length;
  34.     },
  35.     innerMargin : function(){
  36.         slideWidth = this.slideWidth();
  37.         return (windowsWidth-this.slideWidth())/2; // left margin
  38.     },
  39.     doSlide : function ()
  40.     {    
  41.         // Move slideInner using margin-left
  42.         j('.slideInner').animate({
  43.             'marginLeft' : this.slideWidth()*(-this.currentPosition)
  44.                 +this.innerMargin()
  45.         });
  46.     },
  47.     determineNewPosition: function (condition)
  48.     {    
  49.         this.currentPosition = ( condition ) ? this.currentPosition+1 : this.currentPosition-1;
  50.     },
  51.  
  52.     // manageControls: Hides and shows controls depending on currentPosition
  53.     manageControls: function ()
  54.     {
  55.         // Hide left arrow if position is first slide
  56.         if(this.currentPosition == 0){
  57.             j('.nav-left').fadeTo("slow", 0.33).addClass("disabled")
  58.         }
  59.         else{
  60.             j('.nav-left').fadeTo("fast", 1).removeClass("disabled")
  61.         }
  62.         // Hide right arrow if position is last slide
  63.         if(this.currentPosition == this.numberOfSlides()-1){
  64.             j('.nav-right').fadeTo("slow", 0.33).addClass("disabled")
  65.         }
  66.         else{
  67.             j('.nav-right').fadeTo("fast", 1).removeClass("disabled")
  68.         }        
  69.     },
  70.  
  71.     manageTransparencies : function ()
  72.     {
  73.         slides = this.slides;
  74.         slides.fadeTo("slow", 0.33).addClass("disabled");
  75.         currentImage = slides.get(this.currentPosition);
  76.         j(currentImage).fadeTo("fast", 1).removeClass("disabled");
  77.     },
  78.     slideClicked : function(e)
  79.     {          
  80.         clickedImg = j(this);
  81.         fb(clickedImg);
  82.         fb(e);
  83.         if ( !clickedImg.hasClass('disabled') )
  84.         {
  85.             // TODO: fancybox o algo  
  86.             this.imageClicked();
  87.         }
  88.         else
  89.         {
  90.             index = clickedImg.index(); // index of the slide in slides array
  91.  
  92.             if ( index == currentView.currentPosition )
  93.             {
  94.                 fb(index);
  95.             }
  96.             else
  97.             {
  98.                 setCurrentShopView();
  99.                 currentView.determineNewPosition( index > currentView.currentPosition );
  100.                 currentView.manageControls();
  101.                 currentView.manageTransparencies();
  102.                 currentView.doSlide();
  103.             }
  104.         }
  105.  
  106.     },
  107.     imageClicked : function()
  108.     {
  109.         fb("clicked");
  110.     }
  111. }