rails and ajax
render:update do |page|
page.replace_html 'user_list', :paitial => 'user', :collection => @users
page.visual_effect :highlight, 'user_list'
end
render:update 生成了一个javascript generator,也就是上面的page, 这个generator提供了很多方法,可以用来完成很多功能的javascript生成,通过调用这个generator的方法,render:update 会返回生成的javascript代码,并将返回内容的MIME类型设置成text/Javascript, 这样客户端的AJAX请求就可以识别并执行返回的javascript代码,完成各种动态的效果。
通过这个Generator, 开发人员可以不用接触javascript就可以实现大部分常用功能。例如,通过[](id)方法,我们可以在DOM中找到元素id等于id的对象,并对个该对象进行操作:
page['blank_slate']
page['blank_slate'].show
page['blank_slate'].show('first').up
生成的javascript代码就是:
$(blank_slate')
$(blank_slate').show
$(blank_slate').show('first').up
更强大的地方在于page的select方法,它能够使用css selector语法来选择页面上的元素,对它进行操作:
page.select('div.to_be_hidden').each {|element| element.hide}
除此之外,generator还提供了众多的方法来帮助用户生成各种特效, 例如:
page.replace_html 'blank', 'Hello, world!' # 替换blank的内容为hello world。
page['foo'].value = 'new value' #将foo元素的值设置为new value
page.hide 'message' # 隐藏message元素
generator也提供了一些直接操作javascript的方法:
page << "alert('hello')" #直接插入alert('hello')代码
page.assign 'foo', 'value' #给javascript变量foo赋值为value
page.call 'func' #调用javascript函数func
RJS模板:
render:update 已经给我们动态生成javascript提供了很大的便利,然而它只能用在controller中,这在需要生成大量javascript代码的时候,controller会变得很臃肿,同时不便于管理和重用。RJS为我们提供了另一个好的选择。
RJS模板和RHTML以及RXML模板类似,都是在controller执行完毕后被render然后发送到客户端,其不同之处在于RJS最后被render成为javascript代码发送到客户端然后被执行,执行的结果往往被用来改变原有的页面内容,不像RHTML模板,会被用来生成新的内容页面。RJS模板通常在客户端的请求是ajax的类型的时候才会被调用,也就是说,如果一个action有两个模板,index.rhtml 和 index.rjs, 则如果以非ajax的方式调用index, 则rhtml模板将会被启用,rjs模板会被忽略;相反,如果是ajax方式调用,rjs模板将会被启用。
RJS模板的内容就是前面例子中传递给render:update的block中的内容,rails会自动生成一个javascript generator给rjs模板使用。例如:
page.replace_html 'user_list', :paitial => 'user', :collection => @users
page.visual_effect :highlight, 'user_list'
RJS模板和render:update给我们带来了很大的便利,然而相比rhtml模板,rjs模板也有美中不足,例如不支持partial,这使得重构和复用模板变得不那么容易了。
还有一种方法可以帮助我们有效的组织我们的javascript代码,这就是rails的helper,我们可以将render:update的block中的内容放到helper中,这为我们复用和重构提供了一个有效的工具。 例如:
module ApplicationHelper
def update_time
page.alert 'hello'
end
def spike
render(:update){|page| page.alert_hello}
end
end
render:update do |page|
page.replace_html 'user_list', :paitial => 'user', :collection => @users
page.visual_effect :highlight, 'user_list'
end
render:update 生成了一个javascript generator,也就是上面的page, 这个generator提供了很多方法,可以用来完成很多功能的javascript生成,通过调用这个generator的方法,render:update 会返回生成的javascript代码,并将返回内容的MIME类型设置成text/Javascript, 这样客户端的AJAX请求就可以识别并执行返回的javascript代码,完成各种动态的效果。
通过这个Generator, 开发人员可以不用接触javascript就可以实现大部分常用功能。例如,通过[](id)方法,我们可以在DOM中找到元素id等于id的对象,并对个该对象进行操作:
page['blank_slate']
page['blank_slate'].show
page['blank_slate'].show('first').up
生成的javascript代码就是:
$(blank_slate')
$(blank_slate').show
$(blank_slate').show('first').up
更强大的地方在于page的select方法,它能够使用css selector语法来选择页面上的元素,对它进行操作:
page.select('div.to_be_hidden').each {|element| element.hide}
除此之外,generator还提供了众多的方法来帮助用户生成各种特效, 例如:
page.replace_html 'blank', 'Hello, world!' # 替换blank的内容为hello world。
page['foo'].value = 'new value' #将foo元素的值设置为new value
page.hide 'message' # 隐藏message元素
generator也提供了一些直接操作javascript的方法:
page << "alert('hello')" #直接插入alert('hello')代码
page.assign 'foo', 'value' #给javascript变量foo赋值为value
page.call 'func' #调用javascript函数func
RJS模板:
render:update 已经给我们动态生成javascript提供了很大的便利,然而它只能用在controller中,这在需要生成大量javascript代码的时候,controller会变得很臃肿,同时不便于管理和重用。RJS为我们提供了另一个好的选择。
RJS模板和RHTML以及RXML模板类似,都是在controller执行完毕后被render然后发送到客户端,其不同之处在于RJS最后被render成为javascript代码发送到客户端然后被执行,执行的结果往往被用来改变原有的页面内容,不像RHTML模板,会被用来生成新的内容页面。RJS模板通常在客户端的请求是ajax的类型的时候才会被调用,也就是说,如果一个action有两个模板,index.rhtml 和 index.rjs, 则如果以非ajax的方式调用index, 则rhtml模板将会被启用,rjs模板会被忽略;相反,如果是ajax方式调用,rjs模板将会被启用。
RJS模板的内容就是前面例子中传递给render:update的block中的内容,rails会自动生成一个javascript generator给rjs模板使用。例如:
page.replace_html 'user_list', :paitial => 'user', :collection => @users
page.visual_effect :highlight, 'user_list'
RJS模板和render:update给我们带来了很大的便利,然而相比rhtml模板,rjs模板也有美中不足,例如不支持partial,这使得重构和复用模板变得不那么容易了。
还有一种方法可以帮助我们有效的组织我们的javascript代码,这就是rails的helper,我们可以将render:update的block中的内容放到helper中,这为我们复用和重构提供了一个有效的工具。 例如:
module ApplicationHelper
def update_time
page.alert 'hello'
end
def spike
render(:update){|page| page.alert_hello}
end
end
发表评论
-
12.3.3 scaling issue of the status feed
2011-10-30 17:54 825the problem of the implementati ... -
12.3 the status feed
2011-10-30 15:34 8611. we need to get all the micro ... -
12.2 a working follow button with Ajax
2011-10-29 18:10 9141. in the last chapter, in the ... -
12.2 a web interface for following and followers.
2011-10-28 22:14 8801.before we do the UI, we need ... -
12. following user, 12.1 relationship model
2011-10-18 14:29 7551. we need to use a relationshi ... -
11.3 manipulating microposts.
2011-10-17 15:31 9011. since all micropost actions ... -
11.2 show microposts.
2011-10-17 12:01 7051. add test to test the new use ... -
11.1 user micropost -- a micropost model.
2011-10-17 10:43 11081. we will first generate a mic ... -
10.4 destroying users.
2011-10-16 15:47 747in this chapter, we will add de ... -
10.3 showing users list
2011-10-15 20:41 778in this chapter, we will do use ... -
10.2 protect pages.
2011-10-15 15:11 668again, we will start from TD ... -
10.1 updating users.
2011-10-14 18:30 7101. git checkout -b updating-use ... -
9.4 sign out
2011-10-13 15:21 738whew!!!, last chapter is a long ... -
9.3 sign in success.
2011-10-12 15:39 7521. we will first finish the cre ... -
9.1 about flash.now[:error] vs flash[:error]
2011-10-12 15:37 727There’s a subtle difference ... -
9.2 sign in failure
2011-10-12 12:19 660start from TDD!!! 1. requir ... -
9.1 sessions
2011-10-12 10:00 645a session is a semi-permanent c ... -
what test framework should you use?
2011-10-11 16:56 0for integration test, i have no ... -
what test framework should you use?
2011-10-11 16:56 0<p>for integration test, ... -
8.4 rspec integration tests
2011-10-11 16:53 723in integration test, you can te ...
相关推荐
RJS templates are an exciting and powerful new type of template added to Rails 1.1. Unlike conventional Rails templates that generate HTML or XML, RJS templates generate JavaScript code that is ...
在Rails框架中,rjs文件通常用于实现Ajax(异步JavaScript和XML)功能,通过AJAX,可以无刷新地更新页面部分区域,提高用户体验。虽然现代前端框架如React和Vue.js提供了更强大的解决方案,但在Rails早期,rjs是实现...
标题中的“一些RJS资源和演示入门教程”指的是与Ruby ...通过研究这些文件,开发者可以学习到如何在Rails项目中使用RJS来增强用户体验,实现页面的动态更新,并理解RJS与AJAX、Rails框架的交互方式。
5. **AJAX与JavaScript**:探讨Rails如何与AJAX(异步JavaScript和XML)结合,实现页面无刷新更新,提升用户体验。 6. **Rails工具链**:了解Rails开发中常用的工具,如Gemfile管理依赖,Rails console进行交互式...
这几天一直在学习使用RoR(Ruby on Rails),想建立一个功能全面一点的LBS(Location Based Service)网站。但是对于我这个RoR的初学者(仅有几天时间)来说,毕竟太复杂了。...掌握Ajax在RoR中的一般用法(RJS)。
24.3 RJS模板 451 24.4 结论 456 第25章 ActionMailer 457 25.1 发送邮件 457 25.2 接收邮件 465 25.3 电子邮件的测试 467 第26章 Active Resource 469 26.1 Active Resource的替代品 469 26.2 给我看代码! 471 ...
RJS(Remote JavaScript Template)是Ruby on Rails框架中的一个特殊组件,用于在服务器端生成JavaScript代码,并将其发送到客户端执行,从而实现动态更新页面的功能。这种方式可以有效减少页面刷新次数,提升用户...
AJAX(Asynchronous JavaScript and XML)技术允许网页在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。在本文中,我们将深入探讨在RAILS(Ruby on Rails)框架中实现的AJAX树目录的原理。 ...
在Ruby on Rails框架中,虽然RJS(Ruby JavaScript Server Pages)提供了对AJAX的支持,但处理JSON数据通常更为常见。Rails内置了JSON支持,但在某些情况下,可能需要使用额外的插件,如`json_pure`。安装`json_pure...
Rails框架的流行部分归功于它对Ajax的友好支持,通过RJS模板简化了Ajax开发,以及对RESTful架构的深度集成。REST作为一种设计原则,确实成为了Web开发的趋势,但Java凭借其灵活性和不断进化的框架,如Spring Boot和...