博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
3.5. Buttons
阅读量:6198 次
发布时间:2019-06-21

本文共 2293 字,大约阅读时间需要 7 分钟。

3.5. Buttons

在前面form_to_remote例子中可以看到, 标准的表单和Ajax表单的唯一区别是在生成的HTML中多了一个onsubmit属性,剩余的表单和提交按钮,都是常见的HTML内容。form_to_remote用普通的提交按钮创建了一个特殊的,Ajax化的表单,submit_to_remote响应的可以为表单创建一个特殊的提交按钮。例如:
<%= form_tag :action => 'reverse' %> 

  <p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p> 

  

  <p><%= submit_to_remote 'submit', 'Reverse!', 

          :update => 'reversed2', 

          :url => { :action => 'reverse' } %></p> 

  

  <p id="reversed2"></p>
submit_to_remote 
的第一个参数是buttonname属性,第二个参数是设置按钮的值,也就是按钮显示的内容,当你点击按钮之后,跟前面发生的情况一样。
然后,对于form的提交可以选择是否用Ajax方法实现。考虑下这两个提交按钮的不同:
<%= form_tag :action => 'reverse' %> 

  <p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p> 

  <p id="reversed"></p> 

  <p><%= submit_to_remote 'submit', 'Submit via Ajax', 

          :update => 'reversed', 

          :url => { :action => 'reverse' } %></p> 

  <p><%= submit_tag "Submit non-Ajax" %></p> 

在实际中,在submit_to_remote提交表单时先要对表单内容进行验证。例如,在一个注册用户的过程中,你需要加上验证检查用户名是否可用的功能。
 
3.5.1
. Buttons for Arbitrary Functions
   button_to_function helper
创建一个按钮来引发JavaScriptfunction。就像link_to_function一样,button_to_function的第一个参数是按钮显示的文本,第二个参数是Javascript(代码或是function名)。例如:
<%= button_to_function "Greet", "alert('Hello world!')" %>
创建一个按钮来发起Ajax请求,你可以将button_to_functionremote_function联合起来使用。remote Helper使用和link_to_remote同样的参数,并且为remote运行返回需要的Javascript代码
<%= button_to_function 
"Check Time"

      remote_function(:update => 
"current_time"

        :url => { :action => 'get_time' }) %> 

<div id=
"current_time"></div> 

3.5.2
. Custom Helpers
Link_to_function
link_to_remote的存在可能会让你觉得button_to_function应该也有一个对应的button_to_remote,但是很抱歉,没这么个东西。不过幸运的是,很容易实现!这也给了我们点启示,就是怎么样来实现用户helper,因为我们工作在chapter3这个controller.那么定义用户helper可以放在app/helpers/chapter3_helper.rbapp/helpers/application_helper中,这样在模板中都可以使用。为了创建一个button_to_remote helper, 我们可以模仿Rails API中关于link_to_remote的做法: 第一个参数是按钮的标签,第二个是个hash格式的选项,这个hash选项会作为参数传入remote_function中。下面就是具体方法的定义:
def button_to_remote name, options = {} 

  button_to_function name, remote_function(options) 

end
 
现在你也看到了,这只是button_to_function的一个新包装,但是它现在有了一个跟link_to_remote一样的接口:
<%= button_to_remote "Get Time Now", 

      :update => "current_time", 

      :url    => { :action => 'get_time' } %> 

<div id="current_time"></div>
编写用户helper通常是保持模板的整洁和可维护性的一条最佳途径。任何时候你发现你写了一个逻辑很复杂的方法或者是经常使用的方法,考虑下是不是该把它放到helper中呢?
本文转自 fsjoy1983 51CTO博客,原文链接:http://blog.51cto.com/fsjoy/91363,如需转载请自行联系原作者
你可能感兴趣的文章
HDU - 2018 - 母牛的故事(dp)
查看>>
51nod挑的部分5级题
查看>>
基于matlab的fft变换中参数的设置
查看>>
如何查找JSP页面中的错误
查看>>
2016 年总结
查看>>
Python学习开始
查看>>
VC6.0之Debug调试总结
查看>>
面向对象设计:共性VS个性-------继承的粒度和聚合的粒度以及类的重构
查看>>
Android应用程序消息处理机制(Looper、Handler)分析(4)
查看>>
C++ 类成员的构造和析构顺序
查看>>
将String转化成Stream,将Stream转换成String
查看>>
POJ-1011 Sticks
查看>>
swat主流域文件(file.cio)参数详解——引自http://blog.sciencenet.cn/blog-922140-710636.html...
查看>>
java路径Java开发中获得非Web项目的当前项目路径
查看>>
[译] 为用户提供安全可靠的体验
查看>>
Google API设计指南-资源名称
查看>>
最全React技术栈技术资料汇总(收藏)
查看>>
道德迷宫,不该成为无人驾驶发展的拦路虎!
查看>>
阿里AI界的新伙伴,1秒钟自动生成20000条文案
查看>>
bat文件的一些小技巧
查看>>