rails中使用rjs

先来一段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 中删得干干净净，再也找不出来。