这章中使用的示例,会延续上一章创建的Rails应用chapter2,但是我们会创建一个新的controller。在终端下执行:
script/generate controller chapter3 index get_time repeat reverse
这行命令生成了一个controller chapter3,4个action:index, get_time, repeat和reverse。
在上一章中,我们给出的示例页面都是平淡无奇的,这次我们用一个HTML layout和一个CSS文件把页面打扮一番。首先创建一个新的layout文件,app/view/layouts/application.rhtml,里面写一个基本的XHTML模板:
<!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" xml:lang ="en" >
< head >
< title >Ajax on Rails </title>
< %= javascript_include_tag :defaults % >
< %= stylesheet_link_tag "application" % >
</head>
< body >
< h1 >Ajax on Rails </h1>
< %= yield % >
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< title >Ajax on Rails </title>
< %= javascript_include_tag :defaults % >
< %= stylesheet_link_tag "application" % >
</head>
< body >
< h1 >Ajax on Rails </h1>
< %= yield % >
</body>
</html>
在这个模板中我们实现了两个重要的目标,首先是通过javascript_include_tag :defaults这条语句包含了Prototype和script.aculo.us(具体包括prototype.js, effects.js, dragdrop.js和controls.js),也有application.js, 第二个就是yield,这是插入action模板的地方。为了模板能更好看些,让我们来做一个简单的css文件,位于public/stylesheets/application.css:
body {
background-color: #eee;
color: #222;
font-family: trebuchet;
padding: 0;
margin: 25px;
}
h1 {
margin: -25px -25px 20px -25px;
padding: 50px 0 8px 25px;
border-bottom: 3px solid #666;
background-color: #777;
color: #fff;
font: normal 28pt georgia;
text-shadow: black 0px 0px 5px;
}
a { color: #229; }
.box {
border: 1px solid;
width: 100px; height: 100px;
padding: 5px;
font-size: .6em;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 20px;
}
.pink {
border-color: #f00;
background-color: #fcc;
}
.green {
border-color: #090;
background-color: #cfc;
}
.hover {
border-width: 5px;
padding: 1px;
}
ul {
background-color: #ccc;
padding: 5px 0 5px 30px;
}
background-color: #eee;
color: #222;
font-family: trebuchet;
padding: 0;
margin: 25px;
}
h1 {
margin: -25px -25px 20px -25px;
padding: 50px 0 8px 25px;
border-bottom: 3px solid #666;
background-color: #777;
color: #fff;
font: normal 28pt georgia;
text-shadow: black 0px 0px 5px;
}
a { color: #229; }
.box {
border: 1px solid;
width: 100px; height: 100px;
padding: 5px;
font-size: .6em;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 20px;
}
.pink {
border-color: #f00;
background-color: #fcc;
}
.green {
border-color: #090;
background-color: #cfc;
}
.hover {
border-width: 5px;
padding: 1px;
}
ul {
background-color: #ccc;
padding: 5px 0 5px 30px;
}
接着,我们来充实一下controller中的内容,编辑app/controllers/chapter3_controller.rb定义一些一会儿会用到的action:
class Chapter3Controller < ApplicationController
def get_time
sleep 1.second
render :text => Time.now.to_s
end
def repeat
render :text => params.inspect
end
def reverse
@reversed_text = params[:text_to_reverse].reverse
end
end
def get_time
sleep 1.second
render :text => Time.now.to_s
end
def repeat
render :text => params.inspect
end
def reverse
@reversed_text = params[:text_to_reverse].reverse
end
end
下一步就是添加视图模板中的内容
app/views/chapter3/index.rhtml 就一行代码:
<%= link_to "Check Time", :action => 'get_time' %>
这里应用了like_to这个helper,上章介绍过了,它相当于下面的html代码:
<
a
href
="/chapter3/get_time"
>Check Time
</a>
在浏览器中打开这个页面,就会看到下图所示的画面,点击链接,get_time这个action会呈递一个当前时间的文本。
link_to有几个注意的选项,首先, :confirm允许添加一个javascript的确认对话框,用户可以在执行之前选择取消,假设你有一个链接引发一个潜在的危险动作:
<%= link_to "Fire missile", { :action => 'fire' },
:confirm => "Are you quite sure?" %>
:confirm => "Are you quite sure?" %>
这里可以加一个适当的控制,用户可以选择终止这个动作。
其次,:method选项允许指明HTTP方法是:get, :post, :put, 还是:delete. 也许这些选项显得有点奇怪,因为一般链接只使用HTTP的GET方法,表单只能使用GET或者POST。那么为什么Rails这么做呢?其实这里有个小骗局,看看我为什么这么说:建立一个链接,并指定:method:
<%= link_to "Delete", "/people/1", :method => :delete %>
如果你查询一下helper产生的源代码,你会看到:
<a href="/people/1"
f = document.createElement('form');
f.style.display = 'none';
this.parentNode.appendChild(f);
f.method = 'POST';
f.action = this.href;
var m = document.createElement('input');
m.setAttribute('type', 'hidden');
m.setAttribute('name', '_method');
m.setAttribute('value', 'delete');
f.appendChild(m);
f.submit( );
return false;">Delete </a>
f = document.createElement('form');
f.style.display = 'none';
this.parentNode.appendChild(f);
f.method = 'POST';
f.action = this.href;
var m = document.createElement('input');
m.setAttribute('type', 'hidden');
m.setAttribute('name', '_method');
m.setAttribute('value', 'delete');
f.appendChild(m);
f.submit( );
return false;">Delete </a>
这段代码截获了link的动作,所以当点击链接之后,幕后创建并且提交了一个表单。对于链接本身来说,这个:method只允许链接发起POST请求。那么PUT和DELETE呢?为了让他们工作,Rails使用POST方法来实现,你可以看到上面代码中生成的Javascript的那句,一个名为_method的字段添加到了隐藏的表单中。当Rails的服务器端收到这个参数,就会以这个参数提供的方法来解释执行这个请求。
对于正确使用HTTP 方法在第六章会深入讨论。
本文转自 fsjoy1983 51CTO博客,原文链接:http://blog.51cto.com/fsjoy/91136,如需转载请自行联系原作者