zoukankan      html  css  js  c++  java

  • Layout in Rails

    参考链接：http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts 

    layout 

    layout最基本的使用很简单，默认的layout是app/views/layout目录里与controller同名的模板。如果要指定为其它布局，可以在controller里调用layout方法，像这样： 

    Ruby代码  收藏代码
    1. class ProductsController < ApplicationController   
    2.  layout "inventory"  
    3.  #....  
    4. end  


    之后，所有的action都将以app/views/layout/inventory.html.erb为布局来渲染模板。layout方法还支持:except和:only两个选项，用来选择layout方法影响到的action，顾名思义吧，不记了。 

    Ruby代码  收藏代码
    1. layout "product", :except => [:index, :rss]   


    动态布局 
    当layout方法的参数为一个symbol的时候，这个controller的布局是动态的，必须在controller里定义一个与symbol对应的方法（一般为private即可），这个方法必须返回一个字符串，用作指定布局的名字： 

    Ruby代码  收藏代码
    1. class ProductsController < ApplicationController  
    2.  layout :products_layout   
    3.  def show  
    4.   @product = Product.find(params[:id])   
    5.  end  
    6.   
    7.  private  
    8.  def products_layout  
    9.   @current_user.special? ? "special" : "products"   
    10.  end  
    11. end   


    也可以这样写： 

    Ruby代码  收藏代码
    1. class ProductsController < ApplicationController  
    2.  layout proc { |controller| controller.request.xhr? ? 'popup' : 'application' }  
    3.  # ...   
    4. end   



    结构化布局（Structuring Layouts） 

    Asset Tags 

    javascript_include_tag 
    在页面中引入js文件：public/javascripts/main.js: 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag "main" %>  


    引入public/javascripts/main.js 和 public/javascripts/columns.js: 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag "main", "columns" %>  


    引入public/javascripts/main.js 和 public/photos/columns.js: 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag "main", "/photos/columns" %>  


    引入http://example.com/main.js: 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag "http://example.com/main.js" %>  


    :defaults 选项可用于引入Prototype 和 Scriptaculous 库: 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag :defaults %>  


    :all 选项加载public/javascripts目录下的每个js文件, 以Prototype 和 Scriptaculous开头: 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag :all %>   


    :recursive 选项用于指定是否包含public/javascripts目录的子目录中的js文件: 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag :all, :recursive => true %>  


    如果你加载了多个js文件，可以通过设置:catch选项为true来组合多个js文件到一个js文件中，从而增强用户体验。 : 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag "main", "columns", :cache => true %>  


    默认的，这些js文件将被组合到javascripts/all.js中。你可以手动指定一个缓存文件的位置: 

    Ruby代码  收藏代码
    1. <%= javascript_include_tag "main", "columns", :cache => 'cache/main/display' %>  


    甚至可以使用动态的路径，像这样：cache/#{current_site}/main/display. 

    stylesheet_link_tag 

    stylesheet_link_tag的使用大致和javascript_include_tag相同，只是没有那个:defaults选项。另外，stylesheet_link_tag多了:media、:rel和:type三个选项，用于指定stylesheet link的media、rel和type值，默认值为：media="screen" rel="stylesheet" type="text/css"。 

    layout中的yield 

    在layout里面，yield用来标识view应该插入的地方。像这样： 

    Html代码  收藏代码
    1. <html>   
    2.  <head>   
    3.  </head>   
    4.  <body>   
    5.  <%= yield %>   
    6.  </body>   
    7. </html>   


    带参数的yield一般与content_for一起使用： 

    Html代码  收藏代码
    1. <!--layout-->  
    2. <html>   
    3.  <head>   
    4.  <%= yield :head %>   
    5.  </head>   
    6.  <body>  
    7.   <%= yield %>   
    8.  </body>   
    9. </html>   
    10. <!--view-->  
    11. <% content_for :head do %>   
    12.  <title>A simple page</title>   
    13. <% end %>   
    14. <p>Hello, Rails!</p>   
    15. <!--结果-->  
    16. <html>   
    17.  <head>  
    18.   <title>A simple page</title>   
    19.  </head>   
    20.  <body>  
    21.   <p>Hello, Rails!</p>   
    22.  </body>   
    23. </html>   


    partial 

    把partial作为view的一部分来渲染，可以调用render方法： 

    Ruby代码  收藏代码
    1. <%=render :partial=>"menu"%>  


    上面的代码会把文件名为_menu.html.erb的模板渲染到当前模板中。 

    Ruby代码  收藏代码
    1. <%= render :partial => "shared/menu" %>   


    渲染app/views/shared/_menu.html.erb到当前模板。 
    可以为partial单独指定layout： 

    Ruby代码  收藏代码
    1. <%= render :partial => "link_area", :layout => "graybar" %>   


    partial的layout文件名必须以下划线开头：_graybar.html.erb，而且必须把layout模板文件和partial放在同一个目录下。 

    给partial传递局部变量 
    :locals选项用于设置partial的局部变量： 

    Ruby代码  收藏代码
    1. <%= render :partial => "form", :locals => { :button_label => "Create zone", :zone => @zone } %>   


    这样就可以在_form.html.erb中访问button_label和zone这两个变量。 

    每个partial都有一个和partial名字相同（不带下划线）的局部变量，可以通过:object选项给这个变量传递值： 

    Ruby代码  收藏代码
    1. <%= render :partial => "customer", :object => @new_customer %>   


    这样就可以在_customer.html.erb中访问customer这个变量，它指向@new_customer。 

    当然，作为父模板（parent）的一部分，partial可以直接访问父模板的实例变量，例如这里的@new_customer，但是如果这么做的话，partial就跟父模板耦合了，变得不容易重用了。所以建议使用partial的名字来引用实例变量而不是直接访问实例变量。 
    之前版本的Rails中，如果不指定:object或者:locals选项，rails会自动在父模板中寻找与partial同名的那个实例变量作为partial的局部变量，如： 

    Ruby代码  收藏代码
    1. <%= render :partial => "customer" %>   


    如果在_customer.html.erb中访问customer这个变量，rails将会自动在父模板中寻找名为@customer的实例变量。这个特性在Rails2.2中已经不建议使用了（deprecated）。Rails3.0中已经将这个特性移除了。 

    如果要传递给partial的实例变量名==partial名==model名，可以简写，如： 

    Ruby代码  收藏代码
    1. #当@customer为Customer这个model的实例，并且partial名为customer时  
    2. <%= render :partial => @customer %>   
    3. #相当于  
    4. <%= render :partial => "customer", :object=>@customer %>   



    渲染集合（Collections） 
    :collection选项用于指定被传递给partial的集合对象，假设有books这么个集合，包含了5个Book对象，可以这样使用： 

    Ruby代码  收藏代码
    1. #main.html.erb  
    2. <%= render :partial => "book", :collection => books %>  
    3. #_book.html.erb  
    4. <p><%= book.name%></p>  


    这样，在main.html.erb中，_book.html.erb的内容会被渲染5次。这时候，partial模板中，与partial同名的那个变量指向了:collection选项传过来的集合中的每一项。如果你不想使用这个与partial同名的变量名，可以通过:as选项来设置你想要的变量名（:as的值只能用symbol，不能是string，否则在partial里会得到nil值）： 

    Ruby代码  收藏代码
    1. <%= render :partial => "product", :collection => @products, :as => :item %>   


    在设置:collection选项的时候，rails同时提供了一个counter变量给partial模板，变量名以partial名（不带下划线）开头，以_counter结尾，并且经试验，这个变量名不受:as选项影响（也就是说在上面的代码中，这个变量名应该是product_counter而不是item_counter）。其值为collection对象的索引值（从0开始）。 
    :spacer_template选项用于指定填充于collection每个member之间的模板： 

    Ruby代码  收藏代码
    1. <%= render :partial => "product", :collection => @products, :spacer_template => "product_ruler" %>   


    上面的代码中，_product_ruler.html.erb的内容将被填充到每一对_product partial之间。 
    和:object一样，:collection也有简写形式： 

    Ruby代码  收藏代码
      1. <%= render :partial => @products %>   
  • 相关阅读:
    Cordova插件：InAppBrowser
    Redux入门学习
    【转】浅谈React、Flux 与 Redux
    .Net学习难点讨论系列17
    《集体智慧编程》读书笔记4
    《集体智慧编程》读书笔记3
    《集体智慧编程》读书笔记2
    《集体智慧编程》读书笔记1
    C#与C++的发展历程第四
    C#与C++的发展历程第三
  • 原文地址：https://www.cnblogs.com/goody9807/p/5113483.html
Copyright © 2011-2022 走看看