Rails+Turbolinks环境下JS仅页面刷新正常加载的问题求助

Hey Sebastian, 刚看完你的问题，这俩都是用Turbolinks开发Rails应用时很常见的小坑，我来给你一步步捋清楚解决办法：

问题1：Uhrzeit元素重复添加0 #

这个问题的核心是每次Turbolinks加载页面（包括点击链接、后退/前进）都会触发turbolinks:load事件，而你的zeit()函数每次执行时都在原有内容上追加了0，导致重复累积。

解决起来很简单，修改你的zeit()函数，在更新内容前先清空元素的innerHTML，或者直接替换内容而不是追加：

function zeit() {
  const uhrzeitEl = document.getElementById('Uhrzeit');
  // 先清空原有内容，避免重复追加
  uhrzeitEl.innerHTML = '';
  
  // 你的原有时间计算逻辑（示例）
  const now = new Date();
  let hours = now.getHours();
  let minutes = now.getMinutes();
  
  // 补零逻辑
  hours = hours < 10 ? '0' + hours : hours;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  
  // 直接设置内容，而非追加
  uhrzeitEl.innerHTML = `${hours}:${minutes}`;
}

如果你的原有逻辑是通过追加方式添加0，改成直接替换内容就能彻底解决重复问题。

问题2：确保JS仅在Bolus路径加载 #

要让bolus_rechner.js只在Bolus相关页面生效，有两种靠谱的实现方式：

方式1：视图层面按需引入 #

最直接的方法是只在Bolus对应的视图文件中引入这个JS。比如在app/views/bolus/index.html.erb（或你的Bolus页面视图）里添加：

<%= javascript_include_tag 'bolus_rechner' %>

这样其他页面不会加载这个JS文件，自然不会执行相关逻辑。

方式2：JS内判断当前页面 #

如果你的JS是全局加载的（比如在application.js里引入了），那可以在JS里检查当前页面是否是Bolus页面，再执行逻辑：

document.addEventListener('turbolinks:load', function() {
  // 检查当前路径是否匹配Bolus路径（根据你的实际路由调整）
  if (window.location.pathname.startsWith('/bolus')) {
    // 执行你的胰岛素剂量计算和时间显示逻辑
    zeit();
    // 其他bolus相关的JS代码...
  }
});

更严谨的方式是利用Rails的路径助手，在Bolus页面的HTML中添加一个标识元素：

<!-- 在Bolus页面的视图里添加 -->
<div id="bolus-page" class="page-identifier"></div>

然后JS里检测这个元素是否存在：

document.addEventListener('turbolinks:load', function() {
  if (document.getElementById('bolus-page')) {
    zeit();
    // 执行其他逻辑
  }
});

这种方式不受路径变化影响，稳定性更高。

内容的提问来源于stack exchange，提问作者Sebastian Peter