渲染部分 Rails3.x + coffeescript
Posted
技术标签:
【中文标题】渲染部分 Rails3.x + coffeescript【英文标题】:rendering a partial Rails3.x + coffeescript 【发布时间】:2012-11-15 05:40:01 【问题描述】:我有以下要求。我有一个“学校”下拉菜单,作为最后一个选项,我添加了新学校,所以如果用户选择该选项,我想通过 ajax 将 new_school 表单作为部分加载。
我来了
gem 'rails', '3.2.9'
gem 'coffee-rails', '~> 3.2.1'
Jquery via gem 'jquery-rails'
之前使用 rails 和原型,我曾经使用
Ajax.Updater (aka Rails link_to_remote :update => 'some_div')
并且使用 rails > 3 + JQuery 我熟悉 *.js.erb
,并且有类似的东西
$("#school_form").html("<%= escape_javascript(render(:partial => "form"))%>");
但我是 coffeescript
的新手,我不知道如何使用 coffeescript
来执行此操作,有人可以帮助我 :),(因为我相信您不必为此执行服务器请求)
到目前为止,我已经完成了以下操作以捕捉select_tag
更改事件
$ ->
$('#school_name_select').change ->
unless $(this).val()
$('school_name').html([I want to have the _new_school_form partial here])
【问题讨论】:
【参考方案1】:使用隐藏的 div。
一般来说,您不想费心尝试混合 JS 和 HTML。由于跨站点脚本攻击的可能性,转义可能很复杂、容易出错并且非常危险。
只需将表单部分呈现在默认不显示的 div 中。在 ERB 中:
<div id="school_name_form" style="display: none;">
<%= render 'form' %>
</div>
在您的 CoffeeScript 中:
$ ->
$('#school_name_select').change ->
if $(this).val()
$('#school_name_form').slideUp()
else
$('#school_name_form').slideDown()
我建议使用小而雅致的过渡,例如滑动或淡入淡出。它使您的应用更加精致。
不需要 AJAX。这种模式非常常见,以至于我定义了一个应用程序范围的样式,如下所示。
.not-displayed
display: none;
然后使用 HAML(如果你喜欢的话),HTML 模板就变得简单了:
#school_name_form.not-displayed
= render 'form'
【讨论】:
【参考方案2】:您可以尝试将表单部分呈现在隐藏的 div 中(从语义角度来看不太正确),或者将表单 html 作为任何相关元素的data
属性,例如
f.select school_name, ... , data: form: escape_javascript(render(:partial => "form"))
还有咖啡脚本
$ ->
$('#school_name_select').change ->
unless $(this).val()
$('school_name').html($('#school_name_select').data('form'))
【讨论】:
@dimch,非常感谢,我会选择隐藏 div,但我不知道 :data 标签谢谢以上是关于渲染部分 Rails3.x + coffeescript的主要内容,如果未能解决你的问题,请参考以下文章