🥇 Amostra para começar a usar PJAX em Rails

Portanto, tenho trabalhado para experimentar o PJAX. PJAX é uma técnica onde você pode atualizar uma determinada parte de uma página COM suporte para alterar a barra de URL do navegador quando a solicitação for concluída.

Então, basicamente, é AJAX + pushState.

Dessa forma, você pode transformar um link como http://mysite.com/#!/books/5 em http://mysite.com/books/5 , mantendo o design de uma única página.

Uma grande vantagem disso é que a nova solicitação não terá que recarregar nenhum elemento comum (como seu cabeçalho e rodapé) e também não terá que recarregar suas folhas de estilo, javascripts, o que torna o carregamento muito rápido.

Você pode começar facilmente usando o plugin jQuery PJAX se estiver usando jQuery: https://github.com/defunkt/jquery-pjax

Adicione o código ao seu projeto Rails e você está pronto para ir. Aqui está um exemplo de um site holandês no qual estou trabalhando: http://volgendboek.nl .

Em meu application.js, certifico-me de que todas as minhas tags <a> serão carregadas usando PJAX:

application.js

$('a').pjax('#main')

Esta única linha faz com que todos os links sejam carregados com PJAX. Ele carregará primeiro a página e substituirá o elemento por id = “main” com o conteúdo carregado da solicitação PJAX.

Em seguida, ele atualizará a barra de URL do navegador para refletir o novo URL.

Aqui está um snippet abreviado do meu layout application.html.erb:

application.html.erb

<html>
<head>
  <title>Boek uit? Vind je volgende fantasy boek</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
  <div class="header">
    <div class="logo">
      <%= link_to root_path do %>
        volgendboek<span>.nl</span>
      <% end %>
    </div>
  </div>

  <div class="wrapper">
    <div id="main">
      <%= yield %>
    </div>
  </div>
</body>
</html>

Todas as novas páginas apenas renderizarão tudo com o layout e colocarão a visualização dentro da tag <div id = “main”> </div>. Ao carregar a página com PJAX, ele colocará o html retornado neste div.

Este é o html que uma visualização renderiza:

app / views / series / show.html.erb

<title>Serie: <%= @series.title %></title>
<div class="container">
  <h1><%= @series.title %></h1>
  <div class="books">
    <%= render @series.books %>
  </div>
</div>

Ao fazer sua visualização, você precisa pensar em duas coisas:

Primeiro, certifique-se de incluir uma tag <title> em sua visualização. Já que o jQuery PJAX também atualizará a barra de título do seu navegador. O que é incrível!

Em segundo lugar, é importante envolver todo o conteúdo que você gostaria de carregar em algum tipo de elemento de contêiner. Eu uso <div class = “container”> aqui, mas você pode usar qualquer elemento como container. Isso é importante porque o jQuery PJAX procurará um elemento de contêiner na resposta para carregar na página.

Também há uma coisa que você precisa fazer no seu controlador. Você precisa se certificar de que seu layout não seja renderizado com uma solicitação PJAX.

Então, por exemplo, no meu BooksController eu tenho:

class BooksController < ApplicationController
  def show
    @book = Book.find(params[:id])
    @series = @book.series
    @offset = params[:offset]

    if request.xhr?
      render :layout => false
    end
  end
end

Estou usando request.xhr? para verificar se é uma solicitação PJAX, pois cada solicitação PJAX é uma solicitação AJAX.

Você pode usar o plug-in https://github.com/rails/pjax_rails , que adiciona um auxiliar para fazer esse tipo de coisa para que você possa escrever:

if pjax_request?
  render :layout => false
end

Dê uma olhada nesse plugin. Ele tem alguns recursos interessantes para usar PJAX em Rails.

Related Posts