先来一段rjs的说明:
它是一个文件,保存在app/views 目录下,扩展名为.rjs ,其中包含的命令可以生成JavaScript代码,并交给浏览器去执行。
模板本身的用法和.html.erb 模板一样:当action 收到请求时,如果请求来自于XHR ,它就会优先查
找.rjs 模板,对模板进行解析,生成JavaScript 并返回给浏览器,后者会最终执这些JavaScript 。
RJS 模板可以用于在多个页面之间提供交互性的行为,而且还能减少在页面上直接编写
JavaScript 的代码量。RJS 的一种主要用法就是:让页面上的一次操作引发多个客户端效果。
基本使用方法:
发送请求的view中的html代码
<div id="test">这个要被替换掉</div>
应答该请求的action
def test
...
respond_to do |format|
format.html
format.js
end
end
test.rjs中的代码
page.replace_html("test","我是新替换的内容")
page.visual_effect :highlight,"test", :duration => 2
#高亮test标签
注:replace_html把渲染结果放入指定元素的innerHTML 属性;
其他修改html的方法
I、编辑数据
replace(id,options)
参数说明:元素的id和一组选项——就跟调用render 方法时传入的选项一样
功能:首先删除原来的元素,然后把新生成的元素插入到原来的位置上。
II、插入数据
insert_html(position, id, *options_for_render)
参数说明:插入的位置,目标元素的id ,以及渲染文本的选项。第一个参数可以是(:before 、:top 、:bottom和:after)。
# Insert the rendered 'navigation' partial just before the DOM
# element with ID 'content'.
# Generates: Element.insert("content", { before: "-- Contents of 'navigation' partial --" });
page.insert_html :before, 'content', :partial => 'navigation'
# Add a list item to the bottom of the <ul> with ID 'list'.
# Generates: Element.insert("list", { bottom: "<li>Last item</li>" });
page.insert_html :bottom, 'list', '<li>Last item</li>'
功能:顾名思义,在页面上插入数据
III、显示和隐藏数据
:show 、hide 和toggle
都接受一个参数:元素id
还可以用remove 方法将一个元素彻底从页面上删掉——不是隐藏起来,而是将指定元素从DOM 中删得干干净净,再也找不出来。