Layout in Rails
参考链接:http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts
layout
layout最基本的使用很简单,默认的layout是app/views/layout目录里与controller同名的模板。如果要指定为其它布局,可以在controller里调用layout方法,像这样:
- class ProductsController < ApplicationController
- layout "inventory"
- #....
- end
之后,所有的action都将以app/views/layout/inventory.html.erb为布局来渲染模板。layout方法还支持:except和:only两个选项,用来选择layout方法影响到的action,顾名思义吧,不记了。
- layout "product", :except => [:index, :rss]
动态布局
当layout方法的参数为一个symbol的时候,这个controller的布局是动态的,必须在controller里定义一个与symbol对应的方法(一般为private即可),这个方法必须返回一个字符串,用作指定布局的名字:
- class ProductsController < ApplicationController
- layout :products_layout
- def show
- @product = Product.find(params[:id])
- end
- private
- def products_layout
- @current_user.special? ? "special" : "products"
- end
- end
也可以这样写:
- class ProductsController < ApplicationController
- layout proc { |controller| controller.request.xhr? ? 'popup' : 'application' }
- # ...
- end
结构化布局(Structuring Layouts)
Asset Tags
javascript_include_tag
在页面中引入js文件:public/javascripts/main.js:
- <%= javascript_include_tag "main" %>
引入public/javascripts/main.js 和 public/javascripts/columns.js:
- <%= javascript_include_tag "main", "columns" %>
引入public/javascripts/main.js 和 public/photos/columns.js:
- <%= javascript_include_tag "main", "/photos/columns" %>
引入http://example.com/main.js:
- <%= javascript_include_tag "http://example.com/main.js" %>
:defaults 选项可用于引入Prototype 和 Scriptaculous 库:
- <%= javascript_include_tag :defaults %>
:all 选项加载public/javascripts目录下的每个js文件, 以Prototype 和 Scriptaculous开头:
- <%= javascript_include_tag :all %>
:recursive 选项用于指定是否包含public/javascripts目录的子目录中的js文件:
- <%= javascript_include_tag :all, :recursive => true %>
如果你加载了多个js文件,可以通过设置:catch选项为true来组合多个js文件到一个js文件中,从而增强用户体验。 :
- <%= javascript_include_tag "main", "columns", :cache => true %>
默认的,这些js文件将被组合到javascripts/all.js中。你可以手动指定一个缓存文件的位置:
- <%= 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>
- <head>
- </head>
- <body>
- <%= yield %>
- </body>
- </html>
带参数的yield一般与content_for一起使用:
- <!--layout-->
- <html>
- <head>
- <%= yield :head %>
- </head>
- <body>
- <%= yield %>
- </body>
- </html>
- <!--view-->
- <% content_for :head do %>
- <title>A simple page</title>
- <% end %>
- <p>Hello, Rails!</p>
- <!--结果-->
- <html>
- <head>
- <title>A simple page</title>
- </head>
- <body>
- <p>Hello, Rails!</p>
- </body>
- </html>
partial
把partial作为view的一部分来渲染,可以调用render方法:
- <%=render :partial=>"menu"%>
上面的代码会把文件名为_menu.html.erb的模板渲染到当前模板中。
- <%= render :partial => "shared/menu" %>
渲染app/views/shared/_menu.html.erb到当前模板。
可以为partial单独指定layout:
- <%= render :partial => "link_area", :layout => "graybar" %>
partial的layout文件名必须以下划线开头:_graybar.html.erb,而且必须把layout模板文件和partial放在同一个目录下。
给partial传递局部变量
:locals选项用于设置partial的局部变量:
- <%= render :partial => "form", :locals => { :button_label => "Create zone", :zone => @zone } %>
这样就可以在_form.html.erb中访问button_label和zone这两个变量。
每个partial都有一个和partial名字相同(不带下划线)的局部变量,可以通过:object选项给这个变量传递值:
- <%= render :partial => "customer", :object => @new_customer %>
这样就可以在_customer.html.erb中访问customer这个变量,它指向@new_customer。
当然,作为父模板(parent)的一部分,partial可以直接访问父模板的实例变量,例如这里的@new_customer,但是如果这么做的话,partial就跟父模板耦合了,变得不容易重用了。所以建议使用partial的名字来引用实例变量而不是直接访问实例变量。
之前版本的Rails中,如果不指定:object或者:locals选项,rails会自动在父模板中寻找与partial同名的那个实例变量作为partial的局部变量,如:
- <%= render :partial => "customer" %>
如果在_customer.html.erb中访问customer这个变量,rails将会自动在父模板中寻找名为@customer的实例变量。这个特性在Rails2.2中已经不建议使用了(deprecated)。Rails3.0中已经将这个特性移除了。
如果要传递给partial的实例变量名==partial名==model名,可以简写,如:
- #当@customer为Customer这个model的实例,并且partial名为customer时
- <%= render :partial => @customer %>
- #相当于
- <%= render :partial => "customer", :object=>@customer %>
渲染集合(Collections)
:collection选项用于指定被传递给partial的集合对象,假设有books这么个集合,包含了5个Book对象,可以这样使用:
- #main.html.erb
- <%= render :partial => "book", :collection => books %>
- #_book.html.erb
- <p><%= book.name%></p>
这样,在main.html.erb中,_book.html.erb的内容会被渲染5次。这时候,partial模板中,与partial同名的那个变量指向了:collection选项传过来的集合中的每一项。如果你不想使用这个与partial同名的变量名,可以通过:as选项来设置你想要的变量名(:as的值只能用symbol,不能是string,否则在partial里会得到nil值):
- <%= render :partial => "product", :collection => @products, :as => :item %>
在设置:collection选项的时候,rails同时提供了一个counter变量给partial模板,变量名以partial名(不带下划线)开头,以_counter结尾,并且经试验,这个变量名不受:as选项影响(也就是说在上面的代码中,这个变量名应该是product_counter而不是item_counter)。其值为collection对象的索引值(从0开始)。
:spacer_template选项用于指定填充于collection每个member之间的模板:
- <%= render :partial => "product", :collection => @products, :spacer_template => "product_ruler" %>
上面的代码中,_product_ruler.html.erb的内容将被填充到每一对_product partial之间。
和:object一样,:collection也有简写形式:
- <%= render :partial => @products %>
Layout in Rails的更多相关文章
- rails 杂记 - render and layout
官方文档:http://guides.rubyonrails.org/layouts_and_rendering.html 渲染 view 渲染 html.rb 与相应的 action control ...
- Rails :布局和视图渲染
原文地址: http://guides.ruby-china.org/layouts_and_rendering.html Rails 布局和视图渲染 本文介绍 Action Controller 和 ...
- 在rails中 Rendering Partials through Ajax
之前做.net的时候,自己做了一个showcontent的插件,用来加载页面的局部partial 之前采用的是ashx的方式 但rails里面不太方面,今天找到一个比较好的方法,试验成功 起初网上找到 ...
- Rails中的MIME类型
layout title date comments categories post rails的中的MIME类型 2014-09-08 21:40 true ruby Rails开发中经常使用不同的 ...
- 初始化rails上的compass项目
compass以外还有一个很实用的scss模块, _media-queries.scss 通过终端下载 curl -O https://raw.github.com/paranoida/sass-me ...
- ruby on rails 中render的使用
最近写ror,因为比较菜,很多东西不知道,只能看一点查一点了 render 先上点搜集的常用方式 render :action => "long_goal", :layout ...
- rails跑通第一个demo
rails -h 查看帮助 Usage: rails new APP_PATH [options] Options: -r, [--ruby=PATH] # Path to the Ruby bina ...
- rails总结
rails总结 注意:本文档以rails3.2版本为基础,并且用RubyMine 4.0.3作为ide 一.rails的结构与重要文件 Rails 是一个MVC库.同时,Rails的特点就是:惯用名优 ...
- SummerNote 富文本编辑器 - Rails 集成
使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...
随机推荐
- Jquery--弹窗
<title>弹窗</title> <script src="JS/jquery-1.7.2.js"></script> <s ...
- jsPlumb的简单使用
jsPlumb概述jsPlumb是一个在dom元素之间绘制连接线的javascript框架,它使用svg技术绘制连接线. 基本概念很明显,一个连线主要要解决的问题包括谁和谁连,在哪里连(连接点在哪里) ...
- svn的基线划分与管理
一.基线(服务端默认划分3条基线) trunk:表示开发时版本存放的目录,即在开发阶段的代码都提交到该目录上. branches:表示发布的版本存放的目录,即项目上线时发布的稳定版本存放在该目录中. ...
- CSS的两大重点
一.属性:通过属性的复杂叠加才能做出漂亮的网页 二.选择器:通过选择器找到对应的标签设置样式,选择器的作用是:选择对应的标签,为之添加样式 1>标签选择器:根据标签签名找到标签 div{ ...
- CentOS上安装spark standalone mode(转载)
原文链接 http://blog.csdn.net/chenxingzhen001/article/details/11072765 参考: http://spark.incubator.apache ...
- 玩转UICollectionViewLayout
前言: 实 现垂直方向的单列表来说,使用UITableView足以:若是需要构建横向滑动列表.gridView等直线型布局,则使用 UICollectionView+UICollectionViewF ...
- Reflector.exe 破解注意事项
需要把网络断掉,然后选择手动激活 总结经验:操作步骤要仔细看清,否则会更浪费时间
- Volley-XUtils-OkHttp三种方式实现单张多张图片上传
OkHttp可以作为Volley底层传输协议,速度更快,传大量图片建议使用.OkHttp更多功能请看OkHttp的使用 xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更 ...
- js escape
JS转义 escape().encodeURI().encodeURIComponent()区别详解 JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,e ...
- 2016 CCPC 合肥赛区 平行四边形//打铁记录..... 背锅还是我在行 此处@ctr 233
也希望自己记住这些题并不是真的很难很难... 平行四边形... 这个题要两个直线上的两个点和给出点中的两个点组成的平行四边形面积最大. 确定两个点后,发现线上的点随之确定.那么我们解出线上的点 然后求 ...