使用turbolinks實現局部頁面刷新

turbolinks安裝和使用：

1. Add gem 'turbolinks' to your Gemfile.
2. Run bundle install.
3. Add //= require turbolinks to your Javascript manifest file (usually found at app/assets/javascripts/application.js). If your manifest requires both turbolinks and jQuery, make sure turbolinks is listed after jQuery.
4. Restart your server and you're now using turbolinks!
5. rails4.0默認引入turbolinks的，不需要你的配置。
   
6. 使用scaffold生成person的crud 
   

   class CreatePeople < ActiveRecord::Migration
     def change
       create_table :people do |t|
         t.string :name
         t.string :sex
         t.integer :age
         t.string :phone
         t.text :address
   
         t.timestamps
       end
     end
   end

   
   
7. 修改people_controller

   def person_params
         params.require(:person).permit(:name, :age, :sex, :phone, :address)
       end

8. 修改index.html.erb

   <h1>Listing people</h1>
   
   <table>
     <thead>
       <tr>
         <th>姓名</th>
         <th>性別</th>
         <th>年齡</th>
         <th>電話</th>
         <th>地址</th>
       </tr>
     </thead>
   
     <tbody>
       <% @people.each do |person| %>
         <tr>
           <td><%= person.name %></td>
           <td><%= person.sex %></td>
           <td><%= person.age %></td>
           <td><%= person.phone %></td>
           <td><%= person.address %></td>
           <td><%= link_to 'Show', person %></td>
           <td><%= link_to 'Edit', edit_person_path(person) %></td>
           <td><%= link_to 'Destroy', person, method: :delete, data: { confirm: 'Are you sure?' } %></td>
         </tr>
       <% end %>
     </tbody>
   </table>
   
   <br>
   
   <%= link_to 'New Person', new_person_path %>
   <br><br>
   <%= link_to 'testTurbolinds', '/people/1' %> <br>
   <%= link_to 'testTurbolinds', '/people/2' %> <br>
   <%= link_to 'NoUseTurbolinds', '/people/3','data-no-turbolink'=>true %> <br>

9. 修改show.html.erb

   <p id="notice"><%= notice %></p>
   
   
   <p>
     <strong>Title:</strong>
     <%= @person.name %>
   </p>
   
   <p>
     <strong>Title:</strong>
     <%= @person.name %>
   </p>
   
   <p>
     <strong>Title:</strong>
     <%= @person.sex %>
   </p>
   
   <p>
     <strong>Title:</strong>
     <%= @person.age %>
   </p>
   
   <p>
     <strong>Title:</strong>
     <%= @person.phone %>
   </p>
   
   <p>
     <strong>Title:</strong>
     <%= @person.address %>
   </p>
   
   
   <%= link_to 'Edit', edit_person_path(@person) %> |
   <%= link_to 'Back', people_path %>

10. 修改_form.html.erb

    <%= form_for(@person) do |f| %>
      <% if @person.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(@person.errors.count, "error") %> prohibited this person from being saved:</h2>
    
          <ul>
          <% @person.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
          <% end %>
          </ul>
        </div>
      <% end %>
    
        <div class="field">
          <%= f.label :name %><br>
          <%= f.text_field :name %>
        </div>
        <div class="field">
          <%= f.label :sex %><br>
          <%= f.text_field :sex %>
        </div>
        <div class="field">
          <%= f.label :age %><br>
          <%= f.text_field :age %>
        </div>
        <div class="field">
          <%= f.label :phone %><br>
          <%= f.text_field :phone %>
        </div>
        <div class="field">
          <%= f.label :address %><br>
          <%= f.text_area :address %>
        </div>
    
      <div class="actions">
        <%= f.submit %>
      </div>
    <% end %>

11. 如果application.js中報錯cannot resolve symbol 'turbolinks' 不要理會
12. 修改routes

    resources :people
    
      # The priority is based upon order of creation: first created -> highest priority.
      # See how all your routes lay out with "rake routes".
    
      # You can have the root of your site routed with "root"
      root 'people#index'

13. localhost:3000訪問              
    
14. 前兩個使用turbolinks鏈接訪問只加載title和body,最後一個沒有使用turbolinks的吧全部的css，js都加載了  
15. 網絡監控
16. 第一個鏈接的請求
    
17. 第二個鏈接的請求
    
18. 第三個鏈接的請求
19. 我們可以從github上turbolinks文檔上看到

      Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head. Think CGI vs persistent process.

This is similar to pjax, but instead of worrying about what element on the page to replace, and tailoring the server-side response to fit, we replace the entire body. This means that you get the bulk of the speed benefits from pjax (no recompiling of the JavaScript or CSS) without having to tailor the server-side response. It just works.

Do note that this of course means that you'll have a long-running, persistent session with maintained state. That's what's making it so fast. But it also means that you may have to pay additional care not to leak memory or otherwise bloat that long-running state. That should rarely be a problem unless you're doing something really funky, but you do have to be aware of it. Your memory leaking sins will not be swept away automatically by the cleansing page change any more.