在掌握了 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 Link 时，都会将零（0）添加到“Uhrzeit”的内部html，因为我的 zeit() 函数也是如此。我知道这是因为 turbolinks 兑现了第一个渲染的 bolus.html 并且每次我按下链接时都会在已经计算的时间上添加一个额外的零。有谁知道我可以如何防止 turbolinks 这样做。
2）每次我从我的应用程序加载不同的页面/操作时，都会在时间显示中添加一个零（0）。如何防止 rails/turbolinks 这样做并确保 bolus_rechner.js 仅在我按下指向 bolus 路径的链接时才加载。
提前谢谢你的帮助