Rails的RJS模板二十四
第二节 JavaScriptElementProxy
JavaScriptElementProxy是一个对真正DOM对象的代理。你可以代理对DOM对象的任何JavaScript方法的调用。一些额外的方法已经被添加到proxy对象内以让它们更容易使用。该参考涉及了这些增强的非JavaScript方法。
The JavaScriptElementProxy is a proxy to a real DOM object. You can proxy method calls to the any of the DOM object's JavaScript methods. A few additional methods have been added to the proxy objects to make them more useful. This reference covers those enhanced non-JavaScript methods.
1、replace_html(*options_for_render) Replaces the innerHTML of the DOM object. See the JavaScriptGenerator#replace_html() method for more information. 替换DOM对象的innerHTML。更多信息可参阅JavaScriptGenerator#replace_html方法。
2、replace(*options_for_render) Replaces the outerHTML for the DOM object. See JavaScriptGenerator#replace() method for more information. 替换DOM对象的outerHTML。更多信息可参阅JavaScriptGenerator#replace()方法。
3、reload Reloads the content for the element by re-rendering a partial with the same name as the DOM element's id.
page['header'].reload
# Equivalent to:
page['header'].replace :partial => 'header'
第三节 JavaScriptCollectionProxy
JavaScriptCollectionProxy是理解与工作的RJS最困难的部分。本节将首先涉及一些枚举支持的技巧性部分，然后再真正地参考。这将帮助你避免麻烦并可维护你的生成力。
The JavaScriptCollectionProxy is the most difficult part of RJS to understand and work with. This section will first cover some of the trickier aspects of the enumerable support and the actual reference will begin. This will help you avoid trouble and maintain your productivity.
一、Block Variables and the Enumerable methods – 块变量与可枚举方法
JavaScriptGenerator#select()返回一个JavaScriptElementCollectionProxy类的实例。JavaScriptElementCollectionProxy继承于 JavaScriptCollectionProxy，它提供所有的功能。有关集合代理可枚举方法的技巧部分是出现在块中的代码。块中的代码被翻译成一个JavaScript 的 iterator 函数。可枚举块的另一个技巧部分是你可以为块参数使用你喜欢的任何变量名字，但是在被生成的 JavaScript 的 iterator 函数内变量的名字总是使用 value 与 index 。这个规则适用于你在块内使用的不是在 proxy 对象上的一个简单方法调用的任何表达式上。
JavaScriptGenerator#select() returns an instance of the JavaScriptElementCollectionProxy class. JavaScriptElementCollectionProxy inherits from JavaScriptCollectionProxy, which provides all of the functionality. The trickiest part about the collection proxy enumerable methods is the code that goes within the block. The code within the block is translated into a JavaScript iterator function. Another tricky aspect of the enumerable block is that you can use any variable names you like for the block parameters, but in the generated JavaScript iterator function the variable names used are always value and index. This rule applies to any expression you use within the block that isn't a simple method called on the proxy object.
第一个块参数总是 element，第二个总是 index，除了inject()与pluck()之外。如果你不访问块内的value或index，那么你不必传递它们到块内，下面例子内，块参数的名字是 element。
The first block parameter is always the element and the second is always the index, except with inject() and pluck(). If you don't access the value or index within the block, then you don't have to pass them into the block. In the following example, the block parameter is named element.
# Ruby code
page.select('#elements span').all('allVisible') do |element, index|
element.visible
end
// Generated JavaScript
var allVisible = $$("#elements span").all(function(value, index) {
return value.visible();
});
像你从生成的 JavaScript 内看到的，总是使用变量 value 而不是 element，因为它是在Ruby代码内命名的。这会工作得很好，只要块内的代码是一个简单的代理方法调用。就像在前面代码内看到的。更复杂的表达式需要被写成一个字符串并且被传递给page对象的 << 方法。
As you can see from the generated JavaScript, the variable value was used and not element, as it was named in the Ruby code. This works well, as long as the code within the block is a simple proxied method call, as it was in the preceding code. More complex expressions need to be written as a string and passed to the << method of the page object.
当直接使用一个element proxy而不是一个传递给 << 的字符串时，生成器假设代理的调用是一个方法调用并自动地添加()。这意味着你不能直接proxy一个元素的属性，比如element.innerHTML.
When using a direct element proxy rather than a string passed to <<, the generator assumes that the proxied call is a method call and automatically adds (). This means that you can't directly proxy an element's property, such as element.innerHTML.
page.select('#elements span').any('allVisible') do |value, index|
page << '!value.visible()'
end
块内最后的表达式是出现在被生成 JavaScript 代码内的 return 语句后的声明，因此它可安全地添加更多的方法调用给块。
The last expression in the block is the statement appended to the return statement in the generated JavaScript code, so it is possible to safely add more method calls to the block.
二、Inspecting the Results of the Enumerations – 查看枚举的结果集
可枚举函数的一个问题是很难查看由函数返回的被赋值的 JavaScript 变量。FireBug 控制台不能够显示在一个 Ajax 调用后eval()运行期间赋值变量时，被赋值的变量。我使用了一个很小的 Logger 类，它使用在 FireBug 一章讨论的 printfire() 方法来日志到 JavaScript 控制台。然后我创建一个简单的类来观察由可枚举函数赋值的 JavaScript 变量。你可定义类在 public/javascripts/application.js 文件内。
The one problem with the enumerable functions is that it is difficult to inspect the return JavaScript variables assigned by the function. The FireBug console is unable to display the assigned variable when the variable is assigned during the execution of eval() after an
var Inspector = {}
Inpsector = {
inspect: function(val) {
if (val.innerHTML) {
Logger.log(val.innerHTML);
} else {
Logger.log(val);
}
},
inspectArray: function(array) {
array.each(this.inspect);
}
}
下面是通过使用 Logger 类来观察由 sort_by() 的返回值赋值变量的一个例子。在这个例子中，sort_by()通过它们内容的长度分类页面内所有的段落并且存储最短的对象在数组，sortedParagraphs 内。
Following is an example of the usage of the Logger class for inspecting the variable assigned by the return value of sort_by(). In this case sort_by() sorts all the paragraphs in the page by the length of their content and stores the sorted objects in an Array named sortedParagraphs.
page.select('p').sort_by('sortedParagraphs') do |value, index|
page << 'value.innerHTML.length;'
end
page << 'Logger.inspectArray(sortedParagraphs);'
这个代理简单地迭代遍历被分类的段落并显示每个对象的HTML内容给 FireBug 控制台。
This code simply iterates through the sorted paragraphs and displays the HTML content of each object to the FireBug console. Feel free to expand and improve on the code to meet your own needs.
三、Method Reference
下面所有枚举方法是对同名的Prototype可枚举方法的简单代理。对每个方法(除了pluck)，还有同名的Ruby可枚举方法。Ruby的可枚举方法可能有一个 added?(如 all?)。prototype方法被认为是模仿了Ruby的可枚举方法的语义。因此通过检查相应版本的Ruby方法你可以得到该方法大楖其的目的。
All of the following enumerable methods are simply proxies to the Prototype enumerable method of the same name. For each method (except for pluck), there is a corresponding Ruby enumerable method with the same name. The Ruby enumerable method may have an added ? (e.g., all?). The Prototype methods were meant to mimic Ruby's enumerable methods. Therefore, you can get a pretty good idea of the overall intent of each method by examining the Ruby version.
