如何在Rails 5 + jQuery中使用Turbolinks提交页面并保持状态

Question

我试图在点击另一个元素时显示/隐藏一个section。这是相当简单的，而且我已经成功实现了。问题是：这是一个待办事项清单；任务是通过 Ajax（使用 Turbolinks、data remote 等）创建并检查的，当这种情况发生时，显示/隐藏操作会停止工作，直到我手动重新加载页面。即使我使用 localStorage，如下所示，它也会失去追踪 section 是否被隐藏的状态：

$(document).ready(function(){
    if (localStorage.getItem("revealed?") === "true") {
      $('#completed').removeClass('hide');
    } else {
      $('#completed').addClass('hide');
    }

    $('#show_completed').click(function(){
      if (localStorage.getItem("revealed?") === "false") {
        $('#completed').removeClass('hide');
        localStorage.setItem("revealed?", "true");
      } else {
        $('#completed').addClass('hide');
        localStorage.setItem("revealed?", "false");
      }
    });

});

我尝试了所有想得到的JS解决方案，虽然一些部分有效，但是当任务被自动提交时它们仍然会出现故障。

我被难住了。这是否是jQuery和Turbolinks之间幕后的干扰？我错过了什么？

- San Diago

---

你返回给远程ajax调用的响应是什么？你能提供一个响应控制器动作的例子吗？ - ekampp

Answer 1

可能有一种解决方法是使用 jQuery 中的 on()，如果不能实现，那我们可以尝试另一种方式。

$(document).ready(function(){
    toggleItem();

$('#show_completed').on('click', function(){
  if (localStorage.getItem("revealed?") === "false") {
    $('#completed').removeClass('hide');
    localStorage.setItem("revealed?", "true");
    toggleItem() 
  } else {
    $('#completed').addClass('hide');
    localStorage.setItem("revealed?", "false");
    toggleItem();
  }
});


});

toggleItem = function(){
if (localStorage.getItem("revealed?") && localStorage.getItem("revealed?") === "true") {
      $('#completed').removeClass('hide');
    } else {
      $('#completed').addClass('hide');
    }
}

- Akhil Aravind