1

我正在创建一个表单，用户可以在其中添加许多嵌套问题，每个问题可以有许多嵌套答案，其他字段有 ActiveRecord 验证器，当它们失败时，页面会重新加载，插入的字段仍然存在。

所有回调（例如cocoon:before-insert）都不会重新加载，例如插入对象上的下拉列表的更改处理程序

如果在服务器端验证器上重新加载页面失败，我该怎么做才能使这些回调受到尊重？

另一方面，在代码质量方面，将在茧回调中创建的处理程序添加到new调用控制器上的方法时构建的嵌套对象的最佳方法是什么（即不受后插入/前影响的对象）插入回调）？

这是一些用于澄清的示例咖啡脚本代码：

$(document).ready ->
  $('#questions').on("cocoon:after-insert", (e, added_question) ->
    added_question.find('#type').change ->
      if $(this).val() is "1"
        added_question.find("#answers").hide()
      else
        added_question.find("#answers").show()

编辑：更改问题，因为删除问题是缺少适当的包装类

编辑#2：添加示例代码

4

1 回答 1

1

使用 rails4 时，您正在使用turbolinks，您不能再依赖document.ready事件，而是应该监听page:change事件。

所以你的代码会变成：

$(window).bind 'page:change', () ->
  $('#questions').on("cocoon:after-insert", (e, added_question) ->
    added_question.find('#type').change ->
      if $(this).val() is "1"
        added_question.find("#answers").hide()
      else
        added_question.find("#answers").show()

或者，您可以写出$(document).on 'page:change', () -> ...完全相同的内容。

[更新：替代解决方案]

我还没有真正阅读过事件处理程序:) 一些评论：

  • 您可能需要尝试使用before-insert. 那可能行得通。
  • 其次，您使用的是id #type，但一个页面会有多个？那是自找麻烦:) 如果您获得的不止一个，请使用课程。此外，请使用更具描述性的名称。

有一个更简单的解决方案：jquery可以动态绑定，所以可以写

$('#questions').on 'change', '.question-type', () -> 
  var this = $(this)
  var question = $(this).parent('.your-question-class')
  question.toggle()

不确定您是否真的需要检查该值，只需切换可见性？

这段代码当然没有经过测试，但我希望你能得到它的 gis。查找 jqueryon处理程序，它允许使用选择器捕获事件。因此，在这种情况下，#questionsdiv 内的任何更改事件，在具有类question-type（而不是您不正确的#typeid）的元素上都将由此处理程序处理。它将是动态的，因为它附加到容器元素。因此，如果添加或删除问题，它仍然有效。

于 2014-09-26T15:23:04.490 回答