Planeta Globo.com

Digamos que você tenha uma página com um vídeo e um box ao lado com vídeos relacionados. Neste box de vídeos relacionados há uma paginação e você não quer que o usuário clique ali e o site faça o reload, fazendo seu usuário recarregar o vídeo todo denovo.

A maioria dos sites implementa chamadas AJAX usando o atributo onClick da tag html a. Ex:

  
    Próxima Página
  

Até aí tudo bem. Funciona que é uma beleza, o youtube usa isso, etc. O href=’#’ é usado para não gerar um request pro servidor, usando um recurso simples do html, a âncora.

Se você paginou até a 7a página e quer passar o vídeo para um amigo, com a 7a página selecionada para mostrar alguns vídeos que lá estão, de repente um seu que está ali por exemplo, só com o recurso onClick não seria possível. Teria que pedir para ele paginar e olhar. Mas há uma maneira de fazer isso, e um amigo lá do trabalho, Tiago Motta, fez uma classe javascript que possibilita passar o contexto de todos os boxes da sua página que funcionam com ajax no link para seus amigos.

É o projeto TralhaController: http://github.com/timotta/TralhaController/tree/master

Mas Bruno, comofas/

Esta classe javascript, após você adicionar um observador, ela começa a monitorar a URL do usuário por mudanças na âncora (#). Vamos aos exemplos:

var paginacao_box_videos_relacionados = {
      update: function(url) {
          // faz o parsing da URL
          // faz um request ajax e atualiza o box de videos relacionados
      }
  }
TralhaController.addObserver( paginacao_box_videos_relacionados );

A partir daí o TralhaController passa a monitorar a URL do usuário. Vejamos como montar o link que muda de página no box:

  
    Próxima Página
  

Dessa forma, quando a URL mudar, o observador que programou e adicionou ao TralhaController será notificado e o método update será chamado com a url “http://seu-site-aqui/#pagina_box_videos_relacionados=2″, sem mudar de página, possibilitando que seu observador faça uma chamada ajax atualizando o box.

Até aqui o onClick também faria. A novidade é que se você copiar este link e passar para um amigo, ele conseguirá ver o vídeo/página/qualquer coisa que estava vendo e o box estaria paginado na segunda página, ou seja, o mesmo contexto que você via, o seu amigo também verá pois ao acessar a página seu observador será notificado e atualizará o box com a página certa.

Espero que este projeto os ajude. Ele implementa um padrão de projeto conhecido: O Observer.

Digamos que você tenha uma página com um vídeo e um box ao lado com vídeos relacionados. Neste box de vídeos relacionados há uma paginação e você não quer que o usuário clique ali e o site faça o reload, fazendo seu usuário recarregar o vídeo todo denovo.

A maioria dos sites implementa chamadas AJAX usando o atributo onClick da tag html a. Ex:

  
    Próxima Página
  

Até aí tudo bem. Funciona que é uma beleza, o youtube usa isso, etc. O href=’#’ é usado para não gerar um request pro servidor, usando um recurso simples do html, a âncora.

Se você paginou até a 7a página e quer passar o vídeo para um amigo, com a 7a página selecionada para mostrar alguns vídeos que lá estão, de repente um seu que está ali por exemplo, só com o recurso onClick não seria possível. Teria que pedir para ele paginar e olhar. Mas há uma maneira de fazer isso, e um amigo lá do trabalho, Tiago Motta, fez uma classe javascript que possibilita passar o contexto de todos os boxes da sua página que funcionam com ajax no link para seus amigos.

É o projeto TralhaController: http://github.com/timotta/TralhaController/tree/master

Mas Bruno, comofas/

Esta classe javascript, após você adicionar um observador, ela começa a monitorar a URL do usuário por mudanças na âncora (#). Vamos aos exemplos:

var paginacao_box_videos_relacionados = {
      update: function(url) {
          // faz o parsing da URL
          // faz um request ajax e atualiza o box de videos relacionados
      }
  }
TralhaController.addObserver( paginacao_box_videos_relacionados );

A partir daí o TralhaController passa a monitorar a URL do usuário. Vejamos como montar o link que muda de página no box:

  
    Próxima Página
  

Dessa forma, quando a URL mudar, o observador que programou e adicionou ao TralhaController será notificado e o método update será chamado com a url “http://seu-site-aqui/#pagina_box_videos_relacionados=2″, sem mudar de página, possibilitando que seu observador faça uma chamada ajax atualizando o box.

Até aqui o onClick também faria. A novidade é que se você copiar este link e passar para um amigo, ele conseguirá ver o vídeo/página/qualquer coisa que estava vendo e o box estaria paginado na segunda página, ou seja, o mesmo contexto que você via, o seu amigo também verá pois ao acessar a página seu observador será notificado e atualizará o box com a página certa.

Espero que este projeto os ajude. Ele implementa um padrão de projeto conhecido: O Observer.