RJS Templates for Rails的thought_log程序

最新推荐文章于 2025-11-12 15:17:40 发布

最新推荐文章于 2025-11-12 15:17:40 发布 · 106 阅读

文章标签：

#Rails #Ajax #JavaScript #prototype #浏览器 #ViewUI

Ruby 专栏收录该内容

317 篇文章

订阅专栏

本文介绍了一个基于Rails框架的应用——思想日志(Thought Log)，该应用允许用户远程记录和显示想法。通过使用form_remote_tag和RJS技术实现AJAX功能，无需页面刷新即可更新想法列表。

thought_log是《RJS Templates for Rails》的Getting Started程序
app/controllers/thoughts_controller.rb:
[code]
class ThoughtsController < ApplicationController
def log
@thought = params[:thought]
end
end
[/code]
app/views/thoughts/index.rhtml:
[code]
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Thought Log</title>
<%= javascript_include_tag :defaults %>
</head>
<body>
<h1>My thoughts</h1>

<%= form_remote_tag :url => {:action => 'log'}, :html => {:id => 'thought-form'} %>
<%= text_field_tag 'thought', nil, :size => 40 %>
<%= submit_tag 'Log thought' %>
<%= end_form_tag %>

<div id="thoughts"></div>
</body>
</html>
[/code]
app/views/thoughts/_thought.rhtml:
[code]
<p>
<span style="font-size: 0.8em;">[<%= Time.now.to_s(:db) %>]</span>
<%= h thought %>
</p>
[/code]
app/views/thoughts/log.rjs:
[code]
page.insert_html :bottom, 'thoughts', :partial => 'thought'
page.visual_effect :highlight, 'thoughts'
page.form.reset 'thought-form'
[/code]
需要注意的两点:
1,不要在form_remote_tag中使用:update，否则会生成Ajax.Updater这个Prototype对象而不会生成Ajax.Request对象，前者使用response内容更新一个单独的DOM元素，而后者使用RJS模板返回JavaScript到浏览器并执行。
2,当xx.rhtml和xx.rxml模板与xx.rjs模板在一个目录共存时，xx.rhtml和xx.rxml模板会比xx.rjs模板先被找到并渲染，这样RJS模板就失效了