3.1. Setting the Stage

简介:
这章中使用的示例,会延续上一章创建的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> 
在这个模板中我们实现了两个重要的目标,首先是通过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
}  
{  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 
下一步就是添加视图模板中的内容
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?" %>
这里可以加一个适当的控制,用户可以选择终止这个动作。
 
其次,: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>
这段代码截获了link的动作,所以当点击链接之后,幕后创建并且提交了一个表单。对于链接本身来说,这个:method只允许链接发起POST请求。那么PUT和DELETE呢?为了让他们工作,Rails使用POST方法来实现,你可以看到上面代码中生成的Javascript的那句,一个名为_method的字段添加到了隐藏的表单中。当Rails的服务器端收到这个参数,就会以这个参数提供的方法来解释执行这个请求。
对于正确使用HTTP 方法在第六章会深入讨论。




本文转自 fsjoy1983 51CTO博客,原文链接:http://blog.51cto.com/fsjoy/91136,如需转载请自行联系原作者
目录
相关文章
|
2月前
Error:Execution failed for task ':app:processDebugManifest'. > Manifest merger failed with multiple
Error:Execution failed for task ':app:processDebugManifest'. > Manifest merger failed with multiple
13 1
|
1月前
|
JavaScript
解决报错did you register the component correctly? For recursive components, make sure to provide the “na
解决报错did you register the component correctly? For recursive components, make sure to provide the “na
|
9月前
|
虚拟化
成功解决Failed to execute stage ‘Setup validation’: Hardware does not support virtualization.
成功解决Failed to execute stage ‘Setup validation’: Hardware does not support virtualization.
|
9月前
成功解决Failed to execute stage ‘Setup validation’: Cannot locate gluster packages
成功解决Failed to execute stage ‘Setup validation’: Cannot locate gluster packages
|
Web App开发
Reuse library debug in Chrome - phase1 init phase
Reuse library debug in Chrome - phase1 init phase
84 0
Reuse library debug in Chrome - phase1 init phase
simulation pipeline after change not refresh issue
simulation pipeline after change not refresh issue
83 0
simulation pipeline after change not refresh issue
Working context and Functional profile
Working context and Functional profile
194 0
Working context and Functional profile