如何在Rails中执行AJAX-y条件显示/隐藏表单字段？

Question

我想在Rails中显示或隐藏表单中的一些字段,具体取决于表单中选择字段的状态.我(目前)不需要对字段进行第二次数据库查找,因此我试图将其全部限制在视图中.我已勾画出轮廓,但我在实现细节方面遇到了一些麻烦.

我最初的想法是使用observe_field并调用Element.show等等,但后来我必须写一个Javascript条件.这可能需要工作,但如果可以,我想避免它.

另一种方法是使用observe_field请求RJS模板,并replace_html插入字段.还不错,但由于我正在使用一个form_for块,我要么必须通过RJS模板一直传递表单实例才能正确执行.

我还可以更新每个传递的记录,并在新条件下显示表单,但这就是我想要避免的.在视图中完成所有这一切要简单得多.

我在这里错过了什么？Rails中有条件的显示/隐藏表单的公认惯例是什么？

Answer 1

作为一名 Rails 开发人员，我建议遵循不显眼的 javascript 原则。当谈到 Rails 时，这通常意味着您不应该只编写一个大视图来处理所有功能。这使您的 HTML 视图更易于开发和维护，使您的行为更易于维护，并且通常可以更好地理解您的应用程序正在做什么。从这个意义上说，我不惜一切代价避免使用 Rails javascript 助手。

我要做的就是将你的行为分成你自己编码的 JavaScript 文件。使用 jquery 之类的库（我最喜欢这种东西是 lowpro，但我将是第一个承认我的方式有点设置的人），将事件处理程序附加到特定元素（或附加到一次包含一整类元素）。

对于选择框，当用户更改选择时，将触发 onChange 处理程序。selectedIndex元素上的属性将告诉您选择了哪个选项，并且该数组options将允许您查找关联的选项。因此，在您的处理程序中，您可以执行以下操作（使用原型）：

function(e) {
  var element = Event.element(e)
  var index = element.selectedIndex
  var option = element.options[index]

  if(option.value == "Show fields")
    $('hidden-fields').show()
  else
    $('hidden-fields').hide()
}