Rails5 View Document

更新: 2017/06/11

更新: 2017/06/15 加粗，submit必须放在form_for内部

更新: 2017/06/23 对待完成的追加# TODO:

增加了form_for 选项默认情况的说明

增加了调用form_for/tag时要加<%=>

只加了submit_tag

补充: render action: 't1' 和render 'sample/t1'效果一样

更新: 2017/06/27 增加了各类field的书中位置p111

更新: 2017/06/29 增加了fabicon设置里地址的描述

更新: 2017/07/01 增加了link_to里文字自定义的方法

事故: 2017/07/01 上面那个更新把样例代码复制过来了,结果因为垃圾新浪博客大于小于号<>的bug直接被吞，后面内容全没了。

修复: 2017/07/02 重新填上垃圾新浪造成的坑，顺带鄙视新浪全体工作人员

更新: 2017/07/11 补充参数的含义

总结: 2017/08/13 呼出模板传递变量 render ..., 变量名: 值

向外部传递变量 provide 接收: yield(:变量名)

增加 hidden_field_tag

更新: 2017/08/17 增加了面向全体helper的名称

增加render传递参数的条件: 部分模板

更新: 2017/09/04 修正了submit按钮的确认信息表示方法 data: {confirm: '...', disabled_with: '...'}

增加了check_box_tag

更新: 2017/09/07 增加了部分模板路径的补充
更新: 2017/09/11
修正了部分模板处传递参数的写法(locals: {sample: @value}

更新: 2018/02/06 在link_to处增加多个选项用{}包围, 纠正method的默认选项 get

更新: 2018/02/07 增加视图相关的逻辑方法栏并增加current_page?

更新: 2018/03/06 完善layout相关

替换: 《 ---> < , 》 ---> >

更新: 2018/03/07 补充了呼出模板时候省略一部分路径的规则: [和主模板在同级文件夹时可省略文件夹]

更新: 2018/03/20 完善向部分模板传递参数

更新: 2018/03/29 纠正平写错误 [grounped_collection_select] -> [grouped_collection_select]

　　　　　　　　补充了 grouped_collection_select 的参数说明

更新: 2018/09/30 补充current_page?参数情况, 修改错误的content_for代码

更新: 2019/04/11 修正部分模板处的小错误并补充呼出时的路径写法

更新: 2019/04/17 修正并重构form助手相关描述(跳过select_xxx和其他的表单助手)

统一所有table宽度为100%, 保证美观

添加content_for?

更新: 2020/02/06 完善collection_select参数的说明

视图助手(view helper)

表单视图助手
form

没有动作方法(action method)的话直接呼出模版文件

需要设定route(相当于不需要controller)

分类

form_tag	生成不涉及Model的表单
form_for/form_with	生成编辑特定Model对象的表单

具体视图助手

FormTag助手

和Model无关的通用型

label_tag
text_field_tag
file_field_tag
check_box_tag
radio_button_tag
select_tag
submit_tag
hidden_field_tag

Form助手

参数：对象名属性名其他

例 text_field :book, :title, size:25

label
text_field
file_field
check_box
radio_button
select
f.file_field
f.check_box
f.radio_button
f.select

f.Form助手

参数：属性名其他

前提: 模型路径用 resources来指定

好处：不用指定模型对象；
自动设置路径

f.label
f.text_field f.password_field
f.file_field
f.check_box
f.radio_button
f.select

form_tag

生成通用表格

定义

form_tag([url_opts [, opts]]) do

    ...

end

● 注意:调用要 <%= form_tag ... do>

● 参数

url_opts

和 url_for 的参数一样

也可以用pathHelper

● 例

{controller: :test, action: :t2}

● 注:

省略controller的话默认当前所在controller, 如 { action: :t2 }

controller	视图控制器名
action	动作(方法名)(controller#method)
host	主机名(覆盖现在的主机)
protocol	协议名(覆盖现在的协议)
anchor	锚名？
only_path	是否返回相对url(是否省略协议/主机/接口) 不指定host的话默认true
trailing_slash	末尾要不要/ 默认false
user	HTTP识别用的用户名
password	HTTP识别用的密码
只指定一个:back	链接向之前一个链接 (返回Referer header)

opts

method	发送表格时的HTTP方法默认post
multipart	(enctype属性的'multipart/form-data'设定) 上传文件时候使用 multipart: true 其他时候不用管
其他	<form>的要素，如id, class等

form_for

生成对象的特定表格

定义

form_for(var [, opts]) do |form|

   ...

end

● 注意:调用要 <%= form_for ... do>

● 参数

var

表单修改的对象Model

opts

url

和url_for一样, 见form_tag

也可以用pathHelper

html

和form_tag一样

● method, multipart, 其他(id, class等)

● 好处: 根据传入的Model的状态自动设定路径

新建

# controller

def book

    @book = Book.new

end

# view

<%= form_for @book do |f|%>

# 相当于

<%= form_for @book, books_path,

    html: {id: :new_book, class: new_book} do |f| %>

编辑

# controller

def book

    @book = Book.first

end

# view

<%= form_for @book do |f|%>

# 相当于

<%= form_for @book, book_path(@book),

    html: {id: :edit_book, class: edit_book_1, method: :patch} do |f| %>

生成<input>, <textarea>元素

● f.类型的省略掉obj

● _tag类型的另外查

xxxx_field

text_field(obj, prop [,opts])

password_field(obj, prop[,opts])

file_field(obj, prop[,opts])

hidden_field(obj, prop[,opts])

color_field

datetime_field

email_field

number_field

search_field

time_field

week_field

date_field

datetime_local_field

month_field

range_field

telephone_field

url_field

参数

obj	对象Model实例 ● f.类型下省略
prop	属性名 ● 属性名必须是Model里实际存在的, 不然报错
opts	input/textarea对象的属性
value	值
checked/unchecked	checked/unchecked时的value值

text_area(obj, prop, [,opts])

radio_button(obj, prop, value [,opts])

check_box(obj, prop [, opts [,checked="1" [,unchecked="0"]]])

● 实际输出两个input

原因: 在checkbox没有被点击时传送[没选择]这一信息

HTML5专用元素
不对应html5的生成
text_field

color_field	选择颜色框
datetime_field	输入日期时间框 2017/1/1/1/0
email_field	输入邮件框
number_field	输入数字框
search_field	搜索框
time_field	输入时间框 1/2/0 1:02:00
week_field	输入周框
date_field	输入日期框 2017/1/1
datetime_local_field	输入日期时刻框 (本地?)
month_field	输入月份框
range_field	滑块 slider
telephone_field	输入电话框
url_field	输入网址框

选择框/列表框

select(obj, prop, choices [,opts [,html_opts]])

参数

obj

对象
form_for下省略

prop

指定对象的属性
:sample

choices

选项(options)
数组或者哈希表

数组	选项和值为数组元素
哈希表	选项为哈希值值为哈希值对应的值

opts

选项
指定多个的话用{}扩起来

include_blank	最开头追加一个选项 ● true为空 ● 'test'则输出文本
disabled	指定无效化的选项字符串或者数组
selected	指定初始被选中的选项

html_opts

<select>元素的属性
指定多个的话用{}扩起来

● 例：

select @allQusetionnaire, :question, ['first', 'second', 'third'], {include_blank: 'test', disabled: ['first'], selected: 'second'}, {multiple: true, size: 50}

集合框
使用数据库数据
collection box

collection_select(obj, prop, collection, value, text [,opt [,html_opts]])

obj

对象

● params的名字, params[A][B]的A部分

● form_for代码块下省略

prop

指定对象的属性

● params的名字, params[A][B]的B部分

collection

生成选项的对象

value

对象(collection参数)里指定为 value 的属性

● 调用collection.value指定的方法

text

对象(collection参数)里指定为输出的文本的属性

● 调用collection.text指定的方法

opt

和选项框/列表框一样
指定多个的话用{}扩起来

include_blank	最开头追加一个选项 ● true为空 ● 'test'则输出文本
disabled	指定无效化的选项字符串或者数组
selected	指定初始被选中的选项

html_opts

<select>元素的属性

选择框/列表框/集合框
选项组块化

grouped_collection_select(obj, prop, collection, group, group_label, option_key, option_value [,opts [,html_opts]])

● 前提：准备association

● 参数

obj

对象
form_for代码块下省略

prop

指定对象的属性

collection

参数构成<optgroup>要素的对象数组

group

<option>的数据源
collection的成员(member)

● 必须是collection的方法(返回一个数组), 获取下一级选项的数组/Model

自动进行如下调用

collection.group

group_label

<optgroup>的标签元素，同时也是小组标签
参数collection的属性

● 必须是collection的方法(返回一个值)

作为选项群的标签文本

option_key

<option>的value
参数grounp的属性

option_value

<option>的文本
参数grounp的属性

opts

和选项框/列表框一样
指定多个的话用{}扩起来

include_blank	最开头追加一个选项 ● true为空 ● 'test'则输出文本
disabled	指定无效化的选项字符串或者数组
selected	指定初始被选中的选项

html_opts

<select>元素的属性

select_tag

select_tag(prop, [opt_tags [,opts]])

参数含义

prop

编辑对象

opt_tags

<option>选项 (字符串的数组)

select_tag :test, raw("<option>a</option>

<option>a</option><option>a</option>")

● 生成选项的方法: options_xxxxx

opts

opts + html_opts

● opts

include_blank	最开头追加一个选项 ● true为空 ● 'test'则输出文本
disabled	指定无效化的选项字符串或者数组
selected	指定初始被选中的选项

● html_opts

<select>元素的属性

id, class等

生成选项

options_xxxxx
options_for_select(container [,select])

container	选项的数组或者哈希表
select	默认的选项指定是用value

options_for_select

options_for_select(container [,selected])

● 参数

container

选项(数组或者hash)

● 数组

value和text都是元素值

● 哈希表

text=>value,

即key对应输出文字, value对应value

selected

设置初始选中的值

● 指定的是value而不是text

option_from_collection_for_select

option_from_collection_for_select(collection, value, text [,selected]

● 相当于 collection_select(obj, prop, collection, value, text [,opt [,html_opts]])

● 参数

collection	对象
value	设置为value的属性
text	设置为text的属性
selected	默认的选项指定是用value

option_groups_from_collection_for_select

option_groups_from_collection_for_select(collection,
group, group_label, option_key, option_value [,selected])
● 相当于 grouped_collection_select(obj, prop, collection, group, group_label, option_key, option_value [,opts [,html_opts]])

● 参数

collection	对象Model <optgroup>用
group	collection的关联 <option>用
group_label	collection的属性 <optgroup>label的text
option_key	group的属性 <option>的value
option_value	group的属性 <option>的text
selected	默认的初始选项

选择时刻

datetime_select
date_select
time_select

xxxx.select(obj, prop [,opts
[,html_opts]])

参数

obj

对象名
form_for下省略

prop

指定对象的属性
:sample

choices

选项
数组或者哈希表

数组	选项和值为数组元素
哈希表	选项为哈希值值为哈希值对应的值

opts

选项
指定多个的话用{}扩起来

html_opts

<select>元素的属性
指定多个的话用{}扩起来

opts

指定多个的话用{}扩起来
P128
# TODO: E055D2D0-BEB2-46F5-818C-B85B5238D596

例：
datetime_select @allQusetionnaire, :question

select_datetime
select_date
select_time
select_year
select_month
select_day
select_hour
select_minute
select_second

select_xxxx(date [,opts [,html_opts]])
和上面的差不多
date指定默认值，不可指定默认选项

其他表格视图助手

标签
<label></label>

label(obj, prop, [,content] [,opts],
&block)

obj	对象名 form_for下省略
prop	指定对象的属性 :sample
content/&block	<label>的内容 &block为代码块
opts	<label>的属性

f.submit

f.submit([value [,opts]])

提交所在form框架下的一切更新

● 例

form.submit 'update', {disabled: true, data: {confirm: 'ok?', disable_with: '...'}}

● 参数

前提

在form_for代码块内部

参数

value

标题

opts

可选

disabled

是否是提交按钮无效

data

独自的数据属性(

confirm	弹出确认框
disable_with	按下提交后提交按钮无效并显示文字

其他

id, class等<input>的属性

form_for下编辑不同模型

fileds_for(var) do |f|
...
end
var: 模块对象
form_for内部用

field_set_tag
整合多个表单

field _set_tag([legend [,opts]) do
...
end

legend	fieldset的标题
opt's	<fieldset>的要素

生成<fieldset><legend>(field的标题)

加工类视图助手

自动转换换行
加<p>

simple_format(text [,html_opts
[,opts]])

参数

text 字符串
html_opts

附加属性
opts 运行选项

opts

sanitize	删除标签默认false
wrapper_tag	指定围绕字符的标签默认p

html_opts

标签: :属性的哈希表
例: {class: :sample, style: :"font-size:
20px"}

simple_format '1111111111111111111', {class:
:test, style: :"font-width:bold; font-size: 20px;"}, {sanitize:
false, wrapper_tag: 'h2'}

剪裁字符串

truncate(text [,opts])

参数

text	需要剪裁的字符串
opts	动作选项

opts

length	需要的字数默认30
separator	到哪里位置不超过长度的最长的
omission	省略除附加的文字注意:省略文字算在length里即length <= strLength + omiLength 多出部分从str里剪裁

注

不要用<%== ... %>输出剪裁过的文字
可能把结束标签给减掉了

截取字符串片段

excerpt(text, phrase [,option])

参数

text	截取对象字符串
phrase	截取的字符串
option	动作选项

option

radius	截取的前后范围
omission	截取时候前后附加的字符串注:再长也会保留截取字符串

表格和列表隔n行换色

cycle(value [,...] [,name:cname])
一般用在each代码块下
例style="background-color:<%= cycle'red',
'#FFff99'%>;

value	颜色值 '#121212', 'red"
name:cname	cycle的名字用于识别

其他颜色相关

获取当前颜色循环	current_cycle([cname='default'])
重置现在循环	reset_cycle([name = 'default])

高亮文字

highlight(text, phrase [,highlighter:
replaced])

text	处理对象
phrase	关键词可以用数组指定一堆
highlighter: replaced	'替换的标签' '<h1></h1>' \1: 搜索到的关键词，占位符

代码块内进行输出

<% = ... %>输出最后一个数据
<% ... %>中想要输出的话
<%
concat ...
...
concat ...
%>
尽量少用

html字符转义

把危险字符转化成安全字符
< <<br> >>
& &

Rails 2及之前版本	h(exp)
Ruby 3之后不需要所有输出自动转义
不转义直接输出	<%== exp %> raw(exp) exp: 返回值的式子等

字符串中除去要素

sanitize(html [,opts])

参数

html	html字符串
opts	指定保留的标签和要素不指定则使用默认 tags: ["p", "h1"] attributes: ["id", "class", "href", "style"] 无视设置永远除去JavaScript:(

字符串修整
不是视图助手，是Ruby语法

sprintf(format, obj [,...])

参数

format	形式
obj	填充的字符

字符

字符串

p()的格式

%b, %B

2进制

8进制

%d, %i

10进制

%x, %X

16进制

浮点数

浮点数
科学计数法

带正负号

负数带负号

右对齐（d)

%[旗][长度][.精度]

旗: 0, +, -
长度:生成字符串总长度（包含小数点和符号）
精度：小数点以下位数。整数的话和长度一样（字符串长度)

数值处理
number_xxxxx

P150~152
# TODO:

number_to_currency(num [,opt])	转换成货币形式
number_to_human(num [,opt])	转换成计数法 1.xxxx*exp(10)
number_to_human_size(num [,opt])	以比特单位转换数值为KB, MB
number_to_percentage(num [,opt])	转换成百分比
number_with_delimiter(num [,opt])	增加各位符(没三位隔一下)
number_with_precision(num [,opt])	指定位数

参数

通用

locale	使用地点默认当前 10.4再写
precision	小数点下的位数默认3 number_to_percentage(num [,opt])默认2
separator	小数点记号默认.
delimiter	位的分隔符默认, 123,456,789 number_to_percentage(num [,opt]) number_with_precision(num [,opt]) 都默认为''空
raise	参数无效时是否发送例外 NumberError 默认false

number_to_currency

unit	货币单位默认$
format	正数形式默认 %u%n %u货币单位 %n数值绝对值
negative_format	复数形式默认-%u%n

number_to_human

units	单位整数位: :unit, :ten, :hundred, :thousand, :million, :billion, :trillion, :quadrillion 小数位: :deci, :centi, :mili, :micro, :nano, :pico, :femto 默认对应当前位数
format	输出形式默认 %n%u

number_to_human
number_to_human_size
number_to_percentage
number_with_precision

significant	true的话precision限制数值全体 false的话只限定小数点以下默认false
strip_insignnificant_zero	删除小数点以下的0 默认true： number_to_human number_to_human_size 默认false： number_to_percentage number_with_precision

转换时间格式
t.strftime(format)
国际化用l方法
10.4

t.to_s()默认格式
t.strftime(format)

format	字符串
%A	星期 Sunday...
%a	星期简称 Sun, Mon, ...
%B	月 January, ...
%b	月简称 Jan, Feb, ...
%c	Wed Jun 21 02:11:47 2017
%d	日(01~31)
%H	时 24小时制
%I	时 12小时制
%j	一年的第几天 001~366
%M	分 00~59
%m	月 01~12
%p	上下午 AM，PM
%S	秒 00~60
%U	周星期天为起点
%W	周星期一为起点
%w	星期几 0～6 周日为0
%X	时间
%x	日期
%Y	阳历日期 2017
%y	阳历日期后两位 00~99
%Z	时区 JST 和电脑本地时区一致
%z	时区 +900
%%	%

链接类视图助手

生成超链接

link_to(body, url [,html_opt])

html_opt有多个的话套上{}

参数

body	超链接的文本
url	超链接地址(url) 可以用文本直接写url 或者url_for生成复杂的
html_opt	动作选项

html_opt

method

链接时候使用的http方法
(:post, :delete, :patch, :put)
默认get，不写就是get

remote

用Ajax处理链接
9.5.2

data

独自的数据属性(

confirm	点击链接后显示对话框
disable_with	链接中时候表示的文本

属性名

id, class, style等

自定义文本样式

<%= link_to url do%>

文本

<% end %>

url写法

url_for,下一行

link_to 'sample', {controller: :hello, action: :view}, {method:
:post, data: {confirm: 'is OK?'}, style: :"color: red;"}

生成链接地址

url_for(opts)
opts:哈希表形式的地址指定选项

controller	视图控制器名
action	动作(action)名
host	主机名(覆盖现在的主机，啥意思?)
protocol	协议名(覆盖现有的协议)
anchor	标签名(页内跳转的id?)
only_path	是否返回相对地址(省略协议，主机，接口) 不指定host默认true
trailing_slash	末尾加不加slash/
user	HTTP认证用的用户名
password	HTTP认证用的密码



设定默认选项	在controller处,写法和url_for参数一样 def default_url_options(options={}) {controller: ... ,...} end

条件型链接

link_to_if(condition, name [,url
[,html_opt]], &block)
link_to_unless(condition, name [,url
[,html_opt]], &block)
条件不成立时候输出纯文本

参数

condition

条件语句

name

纯文本

url

网址
url_for

html_opt

method

链接时候使用的http方法
(:post, :delete, :patch, :put)
默认post

remote

用Ajax处理链接
9.5.2

data

独自的数据属性(

confirm	点击链接后显示对话框
disable_with	链接中时候表示的文本

属性名

id, class, style等

&block

代码块

特殊的条件型链接

link_to_unless_current(name [, url
[,html_opt]], &block)
链接地址是当前页面时只显示文本，否则显示超链接
用于菜单(menu)

生成邮箱链接

mail_to(address [, name [, opt]])

参数

adress	邮箱
name	文本不指定的话默认邮箱名
opt	选项，看下一行

opt

subject	邮件名
body	邮件内容
cc	抄送人
bcc	密送人

mail_to 'jyoitatsu@foxmail.com', 'contact me', {subject: '来自遥远的火星',
body: %Q(这是一个网页自动邮箱测试\n请无视), cc: %q(qing97511@akane.waseda.jp)

外部资源类视图助手

别称

Asset助手(Asset Helper)

暂略

javascript_include_tag,
stylesheet_link_sheet
9 session

图象要素

image_tag(src [,opts])

参数

src	图像的绝对路径或相对路径(/app/assets/images/后边的) 直接指定的默认在/app/assets/images/ /开头的默认在/public/下
opt	下一行

opt

alt	无法显示时候显示的文字省略的话自动当做去除文件后缀的字符
size	图象尺寸字符串, 宽 x 高，'100x100' 或者width,height分别指定
weight	宽
height	高
属性	其他，如class等

音频视频要素

audio_tag(src [,opts])
video_tag(src [,opts])

src

图像的绝对路径

相对路径

直接指定的默认在/app/assets/audios/

/app/assets/videos/
'/'开头的默认在/public/下

opt

注:为了保证选项可用，放在/public/下

通用	autoplay	是否自动播放默认false
	controls	是否表示控制狂默认true
	loop	是否循环播放默认false
video_tag	autobuffer	是否自定缓存下载
	size	尺寸宽 x 高，'100x100'
	width	宽
	height	高
	poster	视频可播放前显示的图象这个给的是路径

自动发现域

auto_discovery_link_tag
???
p164

设置网页图标(favicon)

favicon_link_tag([src [,opt]])

src

地址

相对地址	直接指定的在/app/assets/images '/'开头的在/public/
绝对地址	不推荐

opt

给<link>的属性

获取外部资源的路径

stylesheet_path(src)
audio_path(src)
video_path(src)
image_path(src)

也有_url,path返回相对路径，url返回绝对路径
位置: /app/assets/.../

其他视图助手

展现数据
debug用

debug(obj)
或者inspect方法
obj: 输出的对象(object)
用来查看model的对象是否成功传递等
debug(@test)
@test.inspect

capture

@var = capture do
...template...
end

用途	展现一些需要重复利用，有没到需要部分模板(partial template)的内容
@var	保存模板的变量
template	任意的模板(template)

不含内容的标签

tag(name [,opts [,open = false [, escape -
true]]])
一般不用，略p170

含内容的标签

content_tag(name [, content] [,opts [,escape
= true]], &block)

name	标签名 :p等
content	内容可以用block来指定
opts	内容的属性哈希
escape	默认true 改了容易被黑
&block	代码块 do {}

自定义视图助手

位置

/app/helper/xxxx_helper.rb

rails4以前的注意

默认读取所有xxxx_helper.rb
取消方法
/config/application.rb
增加一行 config.action_controller.include_all_helper
= false

检验是否有block

block_given? ? capture(&block) :
body

面向全体的helper

/app/helper/application_help.rb

共同造型-layout

位置

/app/views/layouts/

命名规则

自带application.html.erb 没有自定义的默认用这个
视图控制器.html.erb

适用规则

文件放在/app/views/layouts/内部

视图控制器为单位

方法1

默认搜索layout文件夹内的同名layout

/app/views/layouts/视图控制器名.html.erb

例: controller是book则为book.html.erb

class HistoryController < ApplicationController

    layout 'history' #默认使用同名的layout

    ...

end

方法2

明确指定要用的layout

视图控制器类内部
layout layout名
文件放在/app/views/layouts/内部

class HistoryController < ApplicationController

    layout 'sample' #文件位置: app/views/layout/sample.html.erb

    ...

end

● 是整个页面的模板

以动作(action)为单位

render layout: ...
文件放在/app/views/layouts/内部

class HistoryController < ApplicationController

    def search

        ...

        render layout: 'search' # 按action采用模板

    end

end

● 是整个页面的模板

模板向layout传递变量

向外部传递变量 provide

模板处

views/.../....html.erb

layout处

<yield(:变量名)>

views/layouts/....html.erb

# app/views/sample.html.erb

<% provide 'sample', "test" %>

# app/views/layouts/application.html.erb

<%= yield(:sample) | 'nothing exist' %>

例
模板处 <%
provide :title, '

巴特西

Rails5 View Document

最新文章

热门文章