cómo atrapar un evento de cambio de estado UNA VEZ con history.js?

Tengo un código de ejemplo a continuación, en el que si hace clic en los enlaces, luego usa el avance y retroceso, cada cambio de estado causará más y más visitas en el evento 'cambio de estado'. En lugar del que yo esperabacómo atrapar un evento de cambio de estado UNA VEZ con history.js?

Enlaces:

Código:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>History start</title> 
</head> 
<body> 
    <h1>Headline</h1> 
    <hr> 
    <div id="menu"> 
     <ul> 
      <li> 
       <a href="page-1">Page 1</a> 
       <div style="display:none;"> 
        <h2>Page 1</h2> 
        <p>Content 1</p> 
       </div> 
      </li> 
      <li> 
       <a href="page-2">Page 2</a> 
       <div style="display:none;"> 
        <h2>Page 2</h2> 
        <p>Content 2</p> 
       </div> 
      </li> 
     </ul> 
    </div> 
    <hr> 
    <div id="content"> 
     <h2>Start page</h2> 
     <p>Paragraf</p> 
    </div> 
    <script src="external/jquery-1.6.2.min.js"></script> 
    <script>if (typeof window.JSON === 'undefined') { console.log("Loaded json2"); document.write('<script src="external/json2.js"><\/script>'); }</script> 
    <script src="external/history.adapter.jquery.js"></script> 
    <script src="external/history.js"></script> 
    <script> 
    $(document).ready(function() { 
     History.enabled = true; 

     $('a').each(function() { 
      $(this).click(function(e) { 
       e.preventDefault(); 
       var $link = $(e.target), 
        state = {'href': $link.attr('href'), 'title': $link.html()}, 
        $div = $link.siblings('div'), 
        content = $div.html(); 

       $('#content').html(content); 

       History.pushState(state, state.title, state.href); 

       return false; 
      }); 
     }); 

     History.Adapter.bind(window, 'statechange', function() { 
      var State = History.getState(); 
      // remove double hit on event 
      console.log(State); 

     }); 

    }); 
    </script> 
</body> 
</html>

Fuente

2011-10-13 Alexander Morland

Es porque usted está llamando a la función pushState cuando se carga la página, que también causa un cambio de estado. Estaba en una situación similar y usé un booleano antes de mis pushStates, así que sabía que estaba haciendo un pushState. Parece que este ...

historyBool = true; 
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate 

var State = History.getState(); // Note: We are using History.getState() instead of event.state 

    //don't run our function when we do a pushState 
    if(historyBool){ 
     historyBool = false; 
     tempFunction = new Function(State.data.ajaxRunFunction); 
     tempFunction(); 
    } 
    historyBool = true; 
}); 

historyBool = false; 
historySet = {ajaxRunFunction: "upc('" + pageID + "','')"}; 
History.pushState(historySet,"","");

Fuente

2011-11-30 01:53:10

Aunque no es relevante para su problema específico, que tenía un escenario en el que necesitaba para desenlazar el controlador de eventos del adaptador de la historia. Para ello se puede desenlazar el evento "stateChange" de la ventana, que es lo que se une a History.Adapter cuando llame History.Adapter.bind():

$(window).unbind('statechange.namespace');

Usted puede añadir un espacio de nombres al evento para evitar desvinculación de otros manejadores de eventos no relacionados como se indicó anteriormente, o use una función nombrada para desvincular esa función específicamente. Para utilizar el espacio de nombres anterior, lo que se necesita para unir el controlador utilizando el mismo espacio de nombres, es decir

History.Adapter.bind(window,'statechange.namespace',function(){...}

Fuente

2013-10-14 20:55:51 lvanzyl

Gracias, yo estaba tratando de encontrar la función de desvinculación en el objeto del adaptador: / – Tamara

cómo atrapar un evento de cambio de estado UNA VEZ con history.js?

Respuesta

Cuestiones relacionadas