Rails与turbolinks结合使用时，只有在页面刷新时JavaScript才能正确加载。

Question

Rails与turbolinks结合使用时，只有在页面刷新时JavaScript才能正确加载。

javascripthtmlruby-on-railsrubyturbolinks-5

4

掌握了Michael Hartls的Rails教程之后，我现在正在尝试编写自己的第一个ROR 5应用程序。目前，我正在尝试在我的应用程序页面上实现JavaScript。该JavaScript会在HTML中显示时间，并在表单中显示一个因子（根据时间），当它被加载时，它会计算给定（摄入）碳水化合物量的胰岛素。

这是JavaScript文件bolus_rechner.js：

//Standard Data for a 3 Year old child
let dFakTni = 0.5; 
let faKtmor = 1.3;
let faKtnoon = 0.8;
let fakTeven = 0.5;

let d = new Date();
let h = d.getHours();
let m = d.getMinutes();

let uhrZeit = function zeit() {
    if (h < 10) { h = '0' + h; }
    if (m < 10) { m = '0' + m; }
    return (h + ":" + m + " Uhr");
}

function time(){
    let uHr = document.getElementById("Uhrzeit");
    uHr.innerHTML = "Es ist " + uhrZeit() + ".";
}
// Displaying the Timebased carbohydrate Faktor (BE-Faktor) and the actual time inside the form and htmluhrzeit document.addEventListener("turbolinks:load", 
function timeFakt() {

    time();

    let beFaktor = document.getElementById("faktor");
    if (h > 20 || h < 6) {
     beFaktor.value = dFakTni;

    }
    else if (h >= 6 && h < 11) {
     beFaktor.value = faKtmor;

    }

    else if (h >= 11 && h < 18) {
     beFaktor.value = faKtnoon;

    }
    else if (h >= 18 && h <= 20) {
        beFaktor.value = fakTeven;

 }

};
document.addEventListener("turbolinks:load", timeFakt);

// Possibiltiy to change the carbohydrate factor (BE Faktor)

function faktorAendern() {
    let beFaktor = document.getElementById("faktor");

    if (h > 20 || h < 6) {

     dFakTni = beFaktor.value;
    }
    else if (h >= 6 && h < 11) {

        faKtmor = beFaktor.value;
    }

    else if (h >= 11 && h < 18) {

        faKtnoon = beFaktor.value;
    }
    else if (h >= 18 && h <= 20) {

        fakTeven = beFaktor.value;
    };


};

// Calculation of the needed insulin for the amount of carbohydrates eaten

function insulinBerechnen() {

    let eat = document.getElementById("be").value;
    let uLin = document.getElementById("insulin");
    let prod1 = (eat * dFakTni).toFixed(2);
    let prod2 = (eat * faKtmor).toFixed(2);
    let prod3 = (eat * faKtnoon).toFixed(2);
    let prod4 = (eat * fakTeven).toFixed(2);

    if (h > 20 || h < 6) {

        uLin.innerHTML = prod1.toString();
    }
    else if (h >= 6 && h < 11) {

        uLin.innerHTML = prod2.toString();
    }

    else if (h >= 11 && h < 18) {

        uLin.innerHTML = prod3.toString();
    }
    else if (h >= 18 && h <= 20) {

        uLin.innerHTML = prod4.toString();
    };

};

这是HTML代码： application.html.erb：

<html>
  <head>
   <title><%= full_title(yield(:title)) %></title>
    <%= render 'layouts/rails_default' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
  <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %> 
      <%= debug(params) if Rails.env.development? %>     
    </div>
  </body>
</html>

bolus.html.erb:

<% provide(:title, "Bolus Rechner") %>



<body>

            <h1 class="text-center">My Diabetes Diary</h1>



            <h2 class="text-center">Bolus Rechner</h1>
            <h4 class="text-center text-muted" id="Uhrzeit"></h4>





      <div class="container">
  <form>
    <div class="form-group row top buffer">

      <label for="be" class="offset-sm-4 col-sm-2 col-form-label text-left">gegessene BE</label>
      <div class="col-sm-1">
        <input type="number" class="form-control" id="be" name="be">
        <!--<small id="be-info" class="form-text text-muted">
              (Hier können Sie die gegessenen Kohlenhydrate in Broteinheiten eingeben.) 
        </small>-->
      </div>
    </div>
    <div class="form-group row">
      <label for="faktor" class="offset-sm-4 col-sm-2 col-form-label">BE-Faktor</label>
      <div class="col-sm-1">
        <input type="number" class="form-control" id="faktor" name="faktor" value="">
        <!--<small id="faktor" class="form-text text-muted">
                (Hier können Sie den aktuellen BE-Faktor ändern, wenn nötig.) 
        </small>-->
        </div>
        <div class="col-sm-1">
              <button class="btn btn-sm btn-danger" type="button" onclick="faktorAendern()">ändern</button>

      </div>
    </div>
    <div class="row">
      <div class= "offset-sm-5 col-sm2 ">
        <button type="button" class="btn btn-primary btn-md" onclick="insulinBerechnen()">Insulin berechnen</button>
      </div>
      </div>
     <div class="row top-buffer"> 
      <div class="offset-sm-4 col-sm-4 lead bg-warning">

              Sie müssen <strong id="insulin"></strong> U (Insulineinheiten) spritzen

      </div>
      </div>
      </div>
  </form>
  </body>
  <head><%= javascript_include_tag "Bolus_Rechner"%></head>

这是头部文件 _header.html.erb：

<header>
      <nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse fixed-top">

      <a class="navbar-brand" href="#">My Diabetes Diary</a>


        <ul class="navbar-nav navbar-right">
          <li class="nav-item">
            <%= link_to "Home",   root_path, :class => "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "Help",   static_pages_help_path, :class => "nav-link"%>
          </li>
          <li class="nav-item">
            <%= link_to "About",  static_pages_about_path, :class => "nav-link"  %>
          </li>
          <li class="nav-item">
            <%= link_to "Bolus Rechner",  static_pages_bolus_path, :class => "nav-link" %>
          </li>
        </ul>

     </nav>
</header>

这是rails_default局部模板_rails_default.html.erb:

<%= csrf_meta_tags %>
<%= stylesheet_link_tag    'application', media: 'all',
                                          'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'%>
<%= render 'layouts/shim' %>

我的问题：

1) 当使用turbolinks:load作为事件触发器时，当我刷新页面时一切正常。当我在标题中按下“Bolus”链接时，第一次运行很好。每次我按Bolus链接时，由于我的zeit()函数，零（0）将添加到“Uhrzeit”的innerhtml中。我明白这是因为turbolinks缓存了第一个呈现的bolus.html，并且每次我按链接时都会向已经计算出的时间添加一个额外的零。有人知道如何防止turbolinks这样做吗？

2) 每当我从应用程序加载不同的页面/操作时，时间显示器上都会添加一个零（0）。如何防止rails/turbolinks这样做，并确保只有当我按下通往bolus路径的链接时才加载bolus_rechner.js。

提前感谢您的帮助

- Sebastian Peter

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sebastian Peter · Answer 1

我找到了解决方案。JavaScript（bolus_rechner.js）是问题所在，特别是将显示时间的函数分配给全局变量。当使用turbolinks时，JS被缓存在网站/应用程序的全局命名空间中，并且每次应用程序的另一个站点加载脚本时，由于具有turbolinks：load事件侦听器，脚本会被执行。函数zeit（）及其返回值分配给uhrZeit。 uhrZeit（）由time（）执行，time由timefakt（）执行。

let uhrZeit = function zeit() {
    if (h < 10) { h = '0' + h; }
    if (m < 10) { m = '0' + m; }
    return (h + ":" + m + " Uhr");
}

这意味着，当脚本第一次执行时，实际时间为8小时7分钟，时间显示为08:07。下一次调用应用程序的站点时，8和7分别与十进行比较，仍然小于十。然后在返回的字符串中添加另一个零，以此类推。此外，在除bolus.html.erb之外的站点上，由于相应的id不存在，会导致许多引用和类型错误。

解决方案是消除全局变量，并使用帮助函数创建时间并在其他函数内部使用它们

新脚本如下：

function currentMinutes(){
    let date = new Date();
    return date.getMinutes();
}
function currentHours(){
    let date = new Date();
    return date.getHours();
}
function time() {
    let hours = currentHours()
    let minutes = currentMinutes()
    if (hours < 10) { hours = '0' + hours; }
    if (minutes < 10) { minutes = '0' + minutes; }
    return (hours + ":" + minutes + "Uhr");
}

function showTime(){
    let uHr = document.getElementById("Uhrzeit");
    //checking if the id exists on the page
    if (uHr === null){return}
    uHr.innerHTML = "Es ist " + time() + ".";
}
// Displaying the Timebased carbohydrate Faktor (BE-Faktor) and the actual time inside the form and html
function timeFakt() {
    showTime();
    let hours = currentHours()
    let beFactorNight = 0.5; 
    let beFactorMorning = 1.3;
    let beFactorNoon = 0.8;
    let beFactorEvening = 0.5;

    let beFactor = document.getElementById("faktor");
    //checking if the id exists on the page
    if (beFactor === null){return}
    if (hours > 20 || hours < 6) {
     beFactor.value = beFactorNight;

    }
    else if (hours >= 6 && hours < 11) {
     beFactor.value = beFactorMorning;

    }

    else if (hours >= 11 && hours < 18) {
     beFactor.value = beFactorNoon;

    }
    else if (hours >= 18 && hours <= 20) {
        beFactor.value = beFactorEvening;

 }

};
document.addEventListener("turbolinks:load", timeFakt);

// Calculation of the needed insulin for the amount of carbohydrates eaten

function insulinBerechnen() {
    //Form validation and checking if the ids exist on the page
    let eat = document.getElementById("be").value;
    if( eat <= 0){
        alert("If the carbs you ate are zero or below you don't need any insulin"); 
        return};
    let beFaktor = document.getElementById("faktor");
    if (beFaktor === null){return};
    if( beFaktor.value <= 0){
        alert("Enter a Valid factor bigger than 0"); 
        return};

    let uLin = document.getElementById("insulin");

    //calculating the Insulin according to the time of day
    let hours = currentHours()
    if (hours > 20 || hours < 6) {
        if (beFaktor.value === ""){beFactorNight = 0.5}
        else {beFactorNight = beFaktor.value};
        uLin.innerHTML = (eat * beFactorNight).toFixed(2).toString();
    }
    else if (hours >= 6 && hours < 11) {
        if (beFaktor.value === ""){beFactorMorning = 1.3}
        else {beFactorMorning = beFaktor.value};
        uLin.innerHTML = (eat * beFactorMorning).toFixed(2).toString();
    }

    else if (hours >= 11 && hours < 18) {
        if (beFaktor.value === ""){beFactorNoon = 0.8}
        else {beFactorNoon = beFaktor.value};
        uLin.innerHTML = (eat * beFactorNoon).toFixed(2).toString();
    }
    else if (hours >= 18 && hours <= 20) {
        if (beFaktor.value === ""){beFactorEvening = 0.8}
        else {beFactorEvening = beFaktor.value};
        uLin.innerHTML = (eat * beFactorEvening).toFixed(2).toString();
    };

};

我还添加了一种表单验证，以检查0及以下的值。虽然这很辛苦，但我从中学到了重要的教训。
也许这篇文章可以帮助其他新手程序员解决他们在使用turbolinks时遇到的Javascript问题，并更好地理解JavaScript在RoR5应用程序上下文中的工作方式。
祝福塞巴斯蒂安