表单重新加载后的 Cocoon 回调

Question

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

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

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

另一方面，在代码质量方面，将在 cocoon 回调中创建的处理程序添加到调用控制器上的 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：添加示例代码

Answer 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。查找 jquery on 处理程序，它允许使用选择器捕获事件。因此，在这种情况下，#questions div 内的任何更改事件，在具有类question-type 的元素上（而不是您不正确的#type id）都将由此处理程序处理。它将是动态的，因为它附加到容器元素。因此，如果添加或删除问题，它仍然有效。