Question

我有以下要求。我有一个'学校'下拉，作为我添加新学校的最后选项，所以如果用户选择该选项，我想通过ajax将new_school表单加载为部分。

我在

gem 'rails', '3.2.9'
gem 'coffee-rails', '~> 3.2.1'
Jquery via gem 'jquery-rails'

早些时候 rails＆lt; 3 和我曾经用

做的原型

Ajax.Updater (aka Rails link_to_remote :update => 'some_div')

并使用 rails＆gt; 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])

Answer 1

使用隐藏的div。

一般情况下，您不希望尝试混合使用JS和HTML。由于可能存在跨站点脚本攻击，转义可能很复杂，容易出错，而且很容易出现危险。

只需在默认情况下不显示的div中将表单部分渲染。在再培训局：

<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'

Answer 2

您可以尝试在隐藏div中渲染表单部分（从语义角度来看不太正确），或者将表单html作为任何相关元素的data属性，例如

f.select school_name, ... , data: {form: escape_javascript(render(:partial => "form"))}

和Coffeescript

$ ->
  $('#school_name_select').change ->
    unless $(this).val()
      $('school_name').html($('#school_name_select').data('form'))

渲染部分Rails3.x + coffeescript

2 个答案: