使用turbolinks实现局部页面刷新

turbolinks安装和使用：

1. Addgem 'turbolinks'to your Gemfile.
2. Runbundle install.
3. Add//= require turbolinksto your Javascript manifest file (usually found atapp/assets/javascripts/application.js). If your manifest requires both turbolinks and jQuery, make sure turbolinks is listedafterjQuery.
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

   Listing people
   
   
       <% @people.each do |person| %>
         
       <% end %>
     
   
     
   
       
   
         
   姓名
         
   性别
         
   年龄
         
   电话
         
   地址
       
     
   
     
   
           
   <%= person.name %>
           
   <%= person.sex %>
           
   <%= person.age %>
           
   <%= person.phone %>
           
   <%= person.address %>
           
   <%= link_to 'Show', person %>
           
   <%= link_to 'Edit', edit_person_path(person) %>
           
   <%= link_to 'Destroy', person, method: :delete, data: { confirm: 'Are you sure?' } %>
         
   
   
   
   
   
   <%= link_to 'New Person', new_person_path %>
   
   
   
   <%= link_to 'testTurbolinds', '/people/1' %> 
   
   <%= link_to 'testTurbolinds', '/people/2' %> 
   
   <%= link_to 'NoUseTurbolinds', '/people/3','data-no-turbolink'=>true %> 
   

9. 修改show.html.erb

   <%= notice %>
   
   
   
     Title:
     <%= @person.name %>
   
   
   
     Title:
     <%= @person.name %>
   
   
   
     Title:
     <%= @person.sex %>
   
   
   
     Title:
     <%= @person.age %>
   
   
   
     Title:
     <%= @person.phone %>
   
   
   
     Title:
     <%= @person.address %>
   
   
   
   <%= 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? %>
        
    
          
    <%= pluralize(@person.errors.count, "error") %> prohibited this person from being saved:
    
          
    
          <% @person.errors.full_messages.each do |msg| %>
            
    <%= msg %>
          <% end %>
          
        
      <% end %>
    
        
    
          <%= f.label :name %>
    
          <%= f.text_field :name %>
        
        
    
          <%= f.label :sex %>
    
          <%= f.text_field :sex %>
        
        
    
          <%= f.label :age %>
    
          <%= f.text_field :age %>
        
        
    
          <%= f.label :phone %>
    
          <%= f.text_field :phone %>
        
        
    
          <%= f.label :address %>
    
          <%= f.text_area :address %>
        
    
      
    
        <%= f.submit %>
      
    <% 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 topjax, 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.