Question

我的_form部分用于创建/编辑帖子。此表单有一个用于设置帖子状态的下拉列表，因此如果用户将状态设置为Scheduled，则会显示datetimepicker以选择日期，否则默认情况下应该隐藏该状态（即状态为＆时＃34;草案＆＃34;或＆＃34;已发布＆＃34;）。

# app/views/posts/_form.html.haml
= simple_form_for ["admin", @post] do |f|

  = f.input :title

  = f.input :status, collection: ["Draft", "Published", "Scheduled"], selected: status_for(@post)

  .published-field
    = f.input :published_at, as: :date_time_picker

...

# app/helpers/posts_helper.rb
module PostsHelper
  def status_for(post)
    if post.published_at?
      if post.published_at > Time.zone.now
        "Scheduled"
      else
        "Published"
      end
    else
      "Draft"
    end
  end
end

# app/assets/javascripts/posts.coffee
changeVisibility = (status) ->
  if status == "Scheduled"
    $(".published-field").show()
  else
    $(".published-field").hide()

jQuery ->
  changeVisibility $("#post_status :selected").text()
  $("#post_status").on "change", (e) ->
changeVisibility $(this).find(":selected").text()

当用户第一次访问该页面时出现问题，因此默认情况下status设置为Draft（正如预期的那样），但是datetimepicker是可见的，这不是假设的to（请记住？只有当用户选择安排帖子时才能看到此信息）。如果在查看fomr时此时刷新页面，则datepicker会消失。

原始问题也可以在https://gorails.com/episodes/scheduling-posts

找到

这个问题可能是因为turbolinks引起的。我也尝试使用jquery-turbolinks gem，但没有设法解决问题。任何想法如何解决这个问题？

Answer 1

我不擅长咖啡脚本，并向您展示javascript代码。

var ready = function(){
  changeVisibility ($("#post_status :selected").text());
  $("#post_status").on("change", function(e){
  changeVisibility $(this).find(":selected").text();
 });
}
$document.ready(ready);
$document.on('turbolinks:load',ready);

GemFile添加此代码

gem 'turbolinks', '~>5'

Answer 2

如果你想使用Turbolinks，重要的是要记住它根本没有真正的页面加载，它只是做一个XHR请求然后替换<body>中的HTML，同时保存旧的{{1实现后退按钮。

这意味着不会执行脚本，也不会获得任何文档加载/就绪事件等。<body>与$.ready(handler)相同，并且仅在页面加载时运行一次“页面的文档对象模型（DOM）操纵安全。“。

Turbolinks会在$(handler)上触发turbolinks:load，因此请document使用$(document).on('turbolinks:load', handler)。

你还需要知道它保留了旧<body> DOM的副本和任何脚本所做的事实，因此它使用的任何内存，以及来自最后一个“页面”的任何其他JavaScript，例如超时和动画帧等一直在运行。并且您在加载时使用它来实现基于CSS选择器的显示/隐藏。

此Rails guide包含更多信息，以及Turbolinks库本身。

Turbolinks - 仅在预定的帖子上显示datetimepicker - 默认隐藏

2 个答案: