Rails、Turbolinks 和微调器

Posted 2023-05-09

【中文标题】Rails、Turbolinks 和微调器

【英文标题】：Rails, Turbolinks and spinner

【发布时间】：2014-01-02 04:56:56

【问题描述】：

我正在尝试用点击时的微调器替换文本链接。我有这个：

$(document).on('page:fetch', function(e) 
  $('.spinner').replaceWith( "<img src='<%= asset_path('layout/spinner.gif') %>'>" );
);

但很明显，所有带有 .spinner 类的链接都会获得微调器。我只想在 clicked 链接上进行替换，并且只有当它具有 spinner 类时。

有什么建议吗？

【问题讨论】：

让我看看我是否理解正确：当链接被点击时，你希望它被一个微调器替换吗？

是的！点击的链接（触发页面的链接：fetch）。

那些链接在被获取的页面部分内？

否 - 它们在链接所在的页面上： 1. 单击链接 2. 用微调器替换链接文本 3. 获取新页面

【参考方案1】：

您将获得一些代码，这些代码会在 'page:load' 和 ready 事件上触发，以便它们适用于整页加载和 Turbolinks 页面加载。下面的代码将在被点击的 '.spinner' 上添加一个值为 true 的 'data-click' 属性。

#inside both the ready and 'page:load' events
$('.spinner').on('click', function(e) 
  $(this).attr('data-clicked', true);
);

下面的代码将查找具有值为 true 的 data-clicked 属性的“.spinner”，并在其上应用微调器图像。

$(document).on('page:fetch', function(e) 
  $('.spinner[data-clicked="true"]').replaceWith( "<img src='<%= asset_path('layout/spinner.gif') %>'>" );
);

如果有帮助，请告诉我。

【讨论】：

恐怕不行。什么都没发生。我认为单击事件处理程序的内容不会被触发。页面上的JS执行在执行之前就停止了。

@jriff 刚刚用不同的方法更新了我的答案。

是的！做到了（但您应该在顶部代码片段中将“data-click”更改为“data-clicked”）。

你能告诉我为什么这行得通而我的方法不行吗？我真的不明白为什么会有显着差异。

非常感谢您的回答 - 它确实帮了很多忙。享受赏金:)

【参考方案2】：

使用 on click 事件更改带有spinner 类的链接，这样当它们被点击时，它们会变成微调器：

$('.spinner').on("click", function() 
  $(this).replaceWith( "<img src='<%= asset_path('layout/spinner.gif') %>'>" );
);

那么，只有被点击的才会改变。

【讨论】：

恐怕这行不通。我试过了（令人难以置信的是，你想出的代码完全一样）。在替换内容之前加载下一页。我认为 Turbolinks 正在幕后做一些事情。我在我的问题中粘贴的代码有效 - 在页面更改之前显示微调器。但这会影响所有非本意的链接。