第六節 A Look Ahead
As you can see from the Expense Tracker, it is almost too easy to implement complex
第七章 RJS Reference
這個參考部分涉及了由JavaScriptGenerator支持的所有方法，以及JavScriptElementProxy與JavaScriptCollectionProxy類。在本節結束時，還有一個Scriptaculous可視效果的清單。
This reference section covers all of the methods supported by the JavaScriptGenerator as well as the JavascriptElementProxy and the JavaScriptCollectionProxy classes. At the end of the section, there is a list of Scriptaculous visual effects shipping with Rails 1.1.
第一節 JavaScriptGenerator
下面是由JavaScriptGenerator提供的所有公共方法的清單。這些方法可在你的RJS模板內的page對象上調用。
The following is a list of all of the methods public methods offered by the JavaScriptGenerator. These methods are called on the page object in your RJS templates.
因為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', '
// Generated JavaScript
new Insertion.Bottom("products", "
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";