如何使用 Rails 5 + jQuery 保持通过 Turbolinks 提交的页面状态

Posted 2023-02-19

【中文标题】如何使用 Rails 5 + jQuery 保持通过 Turbolinks 提交的页面状态

【英文标题】：How to keep state of page submitted through Turbolinks with Rails 5 + jQuery

【发布时间】：2019-01-05 16:16:42

【问题描述】：

我试图在单击另一个元素时显示/隐藏section。很简单的东西，我让它工作正常。问题是：这是一个待办事项列表；任务是通过 Ajax（使用 Turbolinks、数据远程等）创建和检查的，当发生这种情况时，显示/隐藏操作将停止工作，直到我再次手动重新加载页面。即使我使用 localStorage，它也会丢失该部分是否隐藏的状态，如下所示：

$(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 之间的某种幕后干扰吗？我错过了什么？

【问题讨论】：

您对远程 ajax 调用返回什么样的响应？你能举一个响应控制器动作的例子吗？

【参考方案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');