ruby rjs

配和使用  link_to_remote 'add',:update => "替换ID", :url => { :controller => '', :action => '',:id=>params}

因为RJS生成有关的JavaScript，它可很好地知道屏幕后面发生了什么。了解被生成的JavaScript会更容易调试问题并且可创建更复杂的应用程序。在一些情况下，你的RJS代码可以也变得很复杂或者是你不能用RJS来完美地完成的任务。如果你理解RJS如何生成JavaScript，你可以轻易地把你的代码放入到JavaScript库内并且使用RJS来访问你的新JavaScript对象和方法。

Since RJS is all about generating JavaScript, it is nice to know what is going on behind the scenes. Knowing about the JavaScript that is generated makes it much easier to debug problems and create more complex applications. At some point, your RJS code may become too complex or there may be a task that you can't perform elegantly with RJS. If you understand how RJS generates JavaScript, you can easily port your code into a JavaScript library and use RJS to access your new JavaScript objects and methods.

 

然而，对于下面定义，我在Ruby代码后面放置方法生成的JavaScript。Ruby代码用注释#来标记，并且JavaScript用//来标记。

Therefore, for all of the following definitions, I have placed the JavaScript that the method generates after the Ruby code. The Ruby code is marked with the comment # Ruby code, and the JavaScript is marked with // Generated JavaScript.

 

1、<<(javascript) Writes raw JavaScript to the page. 给页面写原生JavaScript

2、[](id) Returns a JavaScriptElementProxy for the DOM element with the specified id. Methods can be called on the returned element. Multiple method calls can also be chained together. 为指定id的DOM元素返回一个 JaaScriptElementProxy。方法可以在返回的元素上调用。多个方法调用也可以被链在一起。

# Ruby 代码

page['header'].show

// 生成的JavaScript 代码

$("header").show();

# Ruby code

page['header'].first.second

// Generated JavaScript

$("header").first().second();

 

3、assign(variable, value) Assigns a value to the JavaScript variable specified. Ruby objects are automatically converted to JavaScript objects by calling the object's to_json method if it has one, or inspect if it doesn't. 指派一个值给特定的 JavaScript 变量。如果有的话，通过调用对象的to_json方法Ruby对象被自动地转换为JavaScript对象。

# Ruby code

page.assign 'name', { :first => "Cody", :last => "Fauser" }

// Generated JavaScript

name = { "first": "Cody", "last": "Fauser" };

 

4、alert(message) Displays a JavaScript alert dialog box with the provided message. 用提供的消息显示一个 JavaScript 警告对话框。

# Ruby code

page.alert 'An error occurred while processing your request'

// Generated JavaScript

alert("An error occurred while processing your request");

 

5、call(function, arg, ...) Calls a JavaScript function and passes in zero or more arguments. 调用一个 JavaScript 函数并且传递零或多个参数。

# Ruby code

page.call 'displayError', 'An error occurred', 'Critical'

// Generated JavaScript

displayError("An error occurred", "Critical");

你可以在定制对象上调用方法，你通过指定变量名字与方法call添加给你的页面。

You can call methods on custom objects that you've added to your page by specifying the variable name and the method call.

# Ruby code

page.call 'inventory.showTotal'

// Generated JavaScript

inventory.showTotal();

 

6、delay(seconds = 1) Executes the code within the block after delaying for the specified number of seconds. 在延迟指定秒数之后执行块内的代码。

# Ruby code

page.delay(5) do

page.visual_effect :highlight, 'navigation'

end

// Generated JavaScript

setTimeout(function() {

;

new Effect.Highlight("navigation", {});

}, 5000);

 

7、draggable(id, options = {}) Makes the DOM element specified by the id draggable. 使由id指定的DOM元素是可拖放的。

# Ruby code

page.draggable('photo', :revert => true)

// Generated JavaScript

new Draggable('photo', {revert: true});

 

8、drop_receiving( id, options = {}) Makes the DOM element specified by the id receive dropped draggable elements. Draggable elements are created using the RJS draggable method or by using draggable_element() Scriptaculous helper. 让由id指定DOM元素是可接受拖放的元素。可拖放元素是由RJS的draggable方法或使用Scriptaculous辅助方法draggable_element()创建。

# Ruby code

page.drop_receiving('photo', :url => { :action => 'add' })

// Generated JavaScript

Droppables.add("photo", {onDrop:function(element){new

Ajax.Request('/hello_world/add', {asynchronous:true, evalScripts:true,

parameters:'id=' + encodeURIComponent(element.id)})}});

 

9、hide(id, ...) Hides one or more DOM elements. Specify the elements to hide by their DOM ids. 隐藏一个或多个DOM元素。

# Ruby code

page.hide('first', 'second')

// Generated JavaScript

Element.hide("first", "second");

 

10、insert_html(position, id, *options_for_render) Inserts the HTML into the specified position in relation to the element. 插入HTML到相关元素的特定位置。

有效选项是：

The available positions are:

1):before The content is inserted into the page before the element. 内容被插入到页面内元素之前。

2):after The content is inserted into the page after the element. 内容被插入到页面内元素后面。

3):top The content is inserted into the element before the element's existing content. 内容被插入到现有元素内容的顶部。

4):bottom The content is inserted into the element after the element's existing content. 内容被插入到现有元素内容的底部。

# Ruby code

page.insert_html(:bottom, 'products', '<li>Refrigerator</li>')

// Generated JavaScript

new Insertion.Bottom("products", "<li>Refrigerator</li>");

 

11、redirect_to(location) Redirect the browser to the location specified. redirect_to() passes the location to url_for(), so any of the arguments you normally use with url_for() can also be used with redirect_to(). 重定位浏览器到指定位置。Redirect_to()传递位置到 url_for()，因此你通常使用在 url_for() 内的任何参数都可以被用到redirect_to()内。

# Ruby code

page.redirect_to('http://www.google.com')

// Generated JavaScript

window.location.href = "http://www.google.com";

# Ruby code

page.redirect_to(:controller => 'inventory', :action => 'list')

// Generated JavaScript

window.location.href = "http://localhost:3000/inventory/list";