ruby on rails全局布局,局部视图,局部布局
讲rails布局就得先说说yield关键字。
- 在rails布局中,yield标明一个区域,渲染的视图会插入这里。最简单的情况是只有一个 yield,此时渲染的整个视图都会插入这个区域:
<html>
<head>
</head>
<body>
<%= yield %>
</body>
</html>布局中也可以标明多个区域,这个就需要使用具名yield,然后使用content_for方法。对于未命名的yield,视图的主体就会插入到未命名的yield区域。
#主布局 application.html.erb
<html>
<head>
<%= yield :head %>
</head>
<body>
<%= yield %>
</body>
</html> #子页面
<% content_for :head do %> #插入到主布局的 <%= yield :head %>位置
<title>A simple page</title>
<% end %> <p>Hello, Rails!</p>#插入到主布局的 <%= yield %>位置 #最后生成的html
<html>
<head>
<title>A simple page</title>
</head>
<body>
<p>Hello, Rails!</p>
</body>
</html>如果布局不同的区域需要不同的内容,例如侧边栏和底部,就可以使用
content_for方法。content_for方法还可用来在通用布局中引入特定页面使用的 JavaScript 文件或 CSS 文件。以上都是对于在application.html.erb的全局布局来说的。
- 具名局部视图
在视图中渲染局部视图可以使用render方法:<%= render "menu" %>
渲染这个视图时,会渲染名为
_menu.html.erb的文件。注意文件名开头的下划线:局部视图的文件名开头有个下划线,用于和普通视图区分开,不过引用时无需加入下划线。即便从其他文件夹中引入局部视图,规则也是一样:<%= render "shared/menu" %>
#这行代码会引入 app/views/shared/_menu.html.erb 这个局部视图。局部视图的一种用法是作为“子程序”(subroutine),把细节提取出来,以便更好地理解整个视图的作用。例如,有如下的视图:
<%= render "shared/ad_banner" %> <h1>Products</h1> <p>Here are a few of our fine products:</p>
... <%= render "shared/footer" %>这里,局部视图
_ad_banner.html.erb和_footer.html.erb可以包含程序多个页面共用的内容。在编写某个页面的视图时,无需关心这些局部视图中的详细内容。 - 局部布局
和视图可以使用布局一样,局部视图也可使用自己的布局文件。例如,可以这样调用局部视图:<%= render partial: "link_area", layout: "graybar" %>
这行代码会使用
_graybar.html.erb布局渲染局部视图_link_area.html.erb。注意,局部布局的名字也以下划线开头,和局部视图保存在同个文件夹中(不在layouts文件夹中)。还要注意,指定其他选项时,例如
:layout,必须明确地使用:partial选项。但是我在实际使用中,也是把局部布局保存在layouts文件夹中,使用的时候
<%= render partial: "link_area", layout: "layouts/graybar" %>
#为了保证不出错,可以这么写<%= render partial: "link_area.html.erb", layout: "layouts/graybar.html.erb" %>
在使用render :partical时,可以向局部视图传递本地变量
#传递本地变量
<h1>New zone</h1>
<%= render partial: "form", locals: {zone: @zone} %> #使用
<%= form_for(zone) do |f| %>
<p>
<b>Zone name</b><br>
<%= f.text_field :name %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>
#还有些其他方式传递,见前面的参考链接
ruby on rails全局布局,局部视图,局部布局的更多相关文章
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- 【转载】CSS + DIV 实现局部布局
HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局 ...
- 自适应XAML布局经验总结 (三) 局部布局设计模式2
本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面继续介绍局部布局设计模式. 5. 工具箱模式 绘图,三维模型操作等需要工具的情况,可以使用带分 ...
- 自适应XAML布局经验总结 (二) 局部布局设计模式1
本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面开始介绍局部布局设计模式. 1. 工具栏模式 适用于工具栏,标题等的布局. 此块布局区域外层使 ...
- Ruby on Rails Tutorial读书笔记-1
只是怕忘了命令,全部撸一次,记个大概.. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 安装Ruby之前,先要安装RVM: curl -L https://get.rvm.io | bas ...
- Ruby on Rails框架开发学习
学习地址:http://www.ixueyun.com/lessons/detail-lessonId-685.html 一.课程概述 软件开发在经历了面向过程编程的阶段,现在正大行其道的是敏捷开发, ...
- [ruby on rails] 跟我学之(7)创建数据
通过form来创建数据,本章节将会涉及内容:创建form,用户重导向,渲染views 和 flash消息. 1. views初步 编辑 app/views/posts/index.html.erb这个 ...
- Android:控件布局(表格布局)TableLayout
TableLayout继承LinearLayout 实例:用表格布局实现计算机布局>>>>>>>>>>>> 有多少个TableR ...
- 《Ruby on Rails教程》学习笔记
本文是我在阅读 Ruby on Rails 教程的简体中文版时所做的摘录,以及学习时寻找的补充知识.补充知识主要来自于 Ruby on Rails 實戰聖經. Asset Pipeline 在最新版 ...
随机推荐
- dd 使用记录
使用dd的工具 1)测试写速度 2)测试读速度 3)测试读写速度 dd说明: if是输入文本,of是输出文本,bs是块大小,count是你指定读写块的数量 /dev/zero是从内存里面读取,不会产生 ...
- 51Nod 1021 石子归并(动态规划)
#include <iostream> #include <algorithm> #include <string> #include <iostream&g ...
- Centos 6.8安装 SVN
SVN SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subver ...
- win32 指令大全
指令类型 助记符 (带*为特权指令) 对标志寄存器的影响 备注 说明 举例 ZF CF PF SF OF AF DF IF TF 数据传送类 数据传送 MOV 不影响标志位 Move MOV r/m3 ...
- [洛谷P4185] [USACO18JAN]MooTube
题目链接: 传送门 题意: 给定一颗N个节点的树,定义两点距离为他们之间路径中边权最小值. Q次询问K,V,询问到V距离>=K的点有多少(不含V) 呃呃呃呃考试的时候直奔了T3,结果公式推挂了( ...
- Lock wait timeout exceeded; try restarting transaction linux设置mysql innodb_lock_wait_timeout
root权限下: vi /etc/my.cnf 在[mysqld]配置下面加入 innodb_lock_wait_timeout=value # value是你想设置的值 重启mysql /etc/i ...
- HDU 1220 B - Cube
http://acm.hdu.edu.cn/showproblem.php?pid=1220 一开始的做法是,先暴力算出一个面,就是n * n的面,能有多少对.记作face 然后从上开始算下来,最上一 ...
- APPCLOUD禁止滚动条
- 05.NopCommerce给Topic表添加排序及类别字段
在用到Nopcommerce中静态页面表时,发现Topic表没有排序字段和类别字段,导致如果Page文件很多的话,无法区分是哪个类别,为此我稍微扩展了一下字段,在此记录一下操作流程,方便以后自己查看, ...
- Dapper系列之一:Dapper的入门(多表批量插入)
Dapper介绍 简介: 不知道博客怎么去写去排版,查了好多相关博客,也根据自己做过项目总结,正好最近搭个微服务框架,顺便把搭建微服务框架所运用的知识都进行博客梳理,为了以后复习,就仔细琢 ...