即使代码看起来正确，车把也没有进入条件，不会给出错误
Handlebars not entering the condition even though the code seems right, doesn't give out errors
我无法弄清楚这个车把代码有什么问题，
这是它的样子：
{{#ifEquals "ciao" "ciao"}}
<h1>########################</h1>
{{/ifEquals}}
这是帮手：
Handlebars.registerHelper('ifEquals', function(a, b, options) {
console.log(a)
console.log(b)
if (a === b) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
我遇到的问题是车把没有向我显示条件 (<h1>########################</h1>) 内的代码，即使这始终为真。
我已经用 console.log 检查了值，而 运行 站点和它 returns 正确的值。
提前感谢您的回答！
$(function(){ //doc ready
let autorizzazione = getWithExpiry('autorizzazione');
if(autorizzazione == null || autorizzazione == undefined)
{
window.location.replace("http://biolabitis.altervista.org/index.html");
}
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context);
});
Handlebars.registerHelper('ifEquals', function(a, b, options) {
console.log(a)
console.log(b)
if (a === b) {
console.log(options.fn(this));
result = options.fn(this);
return result();
} else {
console.log(options.inverse(this));
return options.inverse(this);
}
});
function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
// if the item doesn't exist, return null
if (!itemStr) {
return null
}
const item = JSON.parse(itemStr)
const now = new Date()
// compare the expiry time of the item with the current time
if (now.getTime() > item.expiry) {
// If the item is expired, delete the item from storage
// and return null
localStorage.removeItem(key)
return null
}
return item.value
}
$('#logoutBTN').click(function()
{
window.localStorage.removeItem("utente");
window.localStorage.removeItem("autorizzazione");
document.location.replace("http://biolabitis.altervista.org/index.html");
});
$('#buttonSubmit').click(function()
{
let parolachiave = $("#parolaChiave").val();
$.ajax({
url: `http://biolabitis.altervista.org/API/Search_All.php?q=${parolachiave}`,
type: "GET",
success: function(data){
result = data;
console.log(result);
var template= $('#template-container').html();
var compiledTemplate = Handlebars.compile(template);
$('#main').html(compiledTemplate(data));
},
error: function(){
console.log("Errore");
console.log(data);
}
});
});
});
这是我的 html 文件（注意我在 javascript 中将 mainReagente 更改为 main 但仍然无法正常工作）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bio Lab ITIS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/tabelleStyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/myRicerca.js"></script>
<script type="text/javascript" src="js/handlebars.min-v4.5.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<ul class="ul-modified">
<li class="nav-item li-modified">
<a class="nav-link" href="index.html">Pagina Principale</a>
</li>
<li class="nav-item li-modified">
<a class="nav-link" href="attrezzatura.html">Attrezzatura</a>
</li>
<li class="nav-item li li-modified">
<a class="nav-link" href="strumentazione.html">Strumentazione</a>
</li>
<li class="nav-item li li-modified">
<a class="nav-link" href="reagenti.html">Reagenti</a>
</li>
<li class="nav-item li li-modified">
<a class="nav-link" href="esperienze.html">Esperienze</a>
</li>
<li class="nav-item li li-modified">
<a class="nav-link" href="pittogrammi.html">Pittogrammi</a>
</li>
<li class="nav-item li li-modified">
<a id="linkRicerca" class="nav-link" href="ricerca.html">Ricerca</a>
</li>
<li class="li li-modified">
<a id="logoutBTN" class="button float-right">Logout</a>
</li>
</ul>
</div>
<div class="jumbotron text-center container-sm row pt-1 divcolor mb-1">
<div class="col-sm-2">
<img src="immagini/logoBIOLABnoBCK.png" class="mx-auto d-block img-fluid">
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Parola Chiave</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="" aria-describedby="basic-addon1" id="parolaChiave">
</div>
<div class="mb-3">
<button type="button" class="btn btn-lg float-right btn-color" id="buttonSubmit" data-dismiss="modal">Ricerca!</button>
</div>
<script id="template-container" type="text/x-handlebars-template">
<div id="template-container">
{{#each result}}
{{#ifEquals "ciao" "ciao"}}
<h1>########################</h1>
{{/ifEquals}}
{{#ifEquals TABELLA "reagenti"}}
<div id="main">
<div class="container">
<header class="text-center mb-5 text-white">
<div class="row">
<div class="col-lg-7 mx-auto">
<h1>Lista dei Reagenti</h1>
</div>
</div>
</header>
<div class="card-columns">
<!-- Produco una card per ogni record sul database-->
<div class="card mb-5">
<div class="bg-white p-3 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-2">{{this.NOME}}</h1>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-1">
<i class="fa fa-check mr-2">Formula: {{this.FORMULA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Aspetto: {{this.ASPETTO}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Ditta: {{this.DITTA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Scheda di Sicurezza: {{this.SCHEDA_SICUREZZA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Quantità: {{this.QUANTITA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Scadenza: {{this.SCADENZA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Conservazione: {{this.CONSERVAZIONE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Tipo di Conservazione: {{this.TIPO_CONSERVAZIONE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Luogo di Conservazione: {{this.LUOGO_CONSERVAZIONE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Codice Internazionale: {{this.CODICE_INTERNAZIONALE}}</i>
</li>
</ul>
</div>
</div>
<!-- Fine della produzione della card per ogni reagente -->
</div>
</div>
</div>
{{else}}
notfunctioning
{{/ifEquals}}
{{#ifEquals TABELLA "strumentazione"}}
<div id="main">
<div class="container">
<header class="text-center mb-5 text-white">
<div class="row">
<div class="col-lg-7 mx-auto">
<h1>Lista della Strumentazione</h1>
</div>
</div>
</header>
<div class="card-deck">
<!-- Produco una card per ogni record sul database-->
<div class="card mb-5">
<div class="bg-white p-3 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-2">{{this.TIPO}}</h1>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-1">
<i class="fa fa-check mr-2">Caratteristiche: {{this.CARATTERISTICHE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Tipo: {{this.ID}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Numero di Inventario: {{this.N_INVENTARIO}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Quantità: {{this.QUANTITA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Collocazione: {{this.COLLOCAZIONE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Collocazione del Manuale: {{this.COLLOCAZIONE_MANUALE}}</i>
</li>
</ul>
</div>
</div>
<!-- Fine della produzione della card per ogni Strumento -->
</div>
</div>
</div>
{{else}}
notfunctioning
{{/ifEquals}}
{{#ifEquals TABELLA "attrezzatura"}}
<div id="main">
<div class="container">
<header class="text-center mb-5 text-white">
<div class="row">
<div class="col-lg-7 mx-auto">
<h1>Lista dell'Attrezzatura</h1>
</div>
</div>
</header>
<div class="card-deck">
<!-- Produco una card per ogni record sul database-->
<div class="card mb-5">
<div class="bg-white p-3 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-2 text-center">{{this.TIPO}}</h1>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-1">
<i class="fa fa-check mr-2">Tipo: {{this.ID}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Quantità: {{this.QUANTITA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Data Verifica Quantità: {{this.DATA_VERIFICA_QUANTITA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Collocazione: {{this.COLLOCAZIONE}}</i>
</li>
</ul>
</div>
</div>
<!-- Fine della produzione della card per ogni reagente -->
</div>
</div>
</div>
{{else}}
notfunctioning
{{/ifEquals}}
{{/each}}
</div>
</script>
</body>
</html>
您似乎在尝试将模板输出附加到不存在的元素中。
当您调用 $('#main').html(compiledTemplate(data)); 时，您要求 jQuery 找到具有 id="main" 的元素并将其内部 HTML 设置为调用 [=12] 的结果=].但是 jQuery 找不到带有 id="main" 的任何元素，因为 none 存在于您的文档中。
要证明 jQuery 找不到匹配元素，您可以 运行 以下内容：console.log($('#main').length)。如果结果为 0，那是因为 jQuery 没有找到匹配选择器的元素。
请务必注意，当您对空结果集调用 .html()（或任何其他方法）时，jQuery 不会抛出错误。这是因为即使是空结果集仍然是有效的 jQuery 结果对象。
您需要将缺少的元素添加到文档中：<div id="main"></div>。但请注意：您不想通过将其包含在模板中来复制此 ID。您模板中带有 id="main" 的元素需要不同的 ID。
我无法弄清楚这个车把代码有什么问题， 这是它的样子：
{{#ifEquals "ciao" "ciao"}}
<h1>########################</h1>
{{/ifEquals}}
这是帮手：
Handlebars.registerHelper('ifEquals', function(a, b, options) {
console.log(a)
console.log(b)
if (a === b) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
我遇到的问题是车把没有向我显示条件 (<h1>########################</h1>) 内的代码，即使这始终为真。
我已经用 console.log 检查了值，而 运行 站点和它 returns 正确的值。
提前感谢您的回答！
$(function(){ //doc ready
let autorizzazione = getWithExpiry('autorizzazione');
if(autorizzazione == null || autorizzazione == undefined)
{
window.location.replace("http://biolabitis.altervista.org/index.html");
}
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context);
});
Handlebars.registerHelper('ifEquals', function(a, b, options) {
console.log(a)
console.log(b)
if (a === b) {
console.log(options.fn(this));
result = options.fn(this);
return result();
} else {
console.log(options.inverse(this));
return options.inverse(this);
}
});
function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
// if the item doesn't exist, return null
if (!itemStr) {
return null
}
const item = JSON.parse(itemStr)
const now = new Date()
// compare the expiry time of the item with the current time
if (now.getTime() > item.expiry) {
// If the item is expired, delete the item from storage
// and return null
localStorage.removeItem(key)
return null
}
return item.value
}
$('#logoutBTN').click(function()
{
window.localStorage.removeItem("utente");
window.localStorage.removeItem("autorizzazione");
document.location.replace("http://biolabitis.altervista.org/index.html");
});
$('#buttonSubmit').click(function()
{
let parolachiave = $("#parolaChiave").val();
$.ajax({
url: `http://biolabitis.altervista.org/API/Search_All.php?q=${parolachiave}`,
type: "GET",
success: function(data){
result = data;
console.log(result);
var template= $('#template-container').html();
var compiledTemplate = Handlebars.compile(template);
$('#main').html(compiledTemplate(data));
},
error: function(){
console.log("Errore");
console.log(data);
}
});
});
});
这是我的 html 文件（注意我在 javascript 中将 mainReagente 更改为 main 但仍然无法正常工作）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bio Lab ITIS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/tabelleStyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/myRicerca.js"></script>
<script type="text/javascript" src="js/handlebars.min-v4.5.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<ul class="ul-modified">
<li class="nav-item li-modified">
<a class="nav-link" href="index.html">Pagina Principale</a>
</li>
<li class="nav-item li-modified">
<a class="nav-link" href="attrezzatura.html">Attrezzatura</a>
</li>
<li class="nav-item li li-modified">
<a class="nav-link" href="strumentazione.html">Strumentazione</a>
</li>
<li class="nav-item li li-modified">
<a class="nav-link" href="reagenti.html">Reagenti</a>
</li>
<li class="nav-item li li-modified">
<a class="nav-link" href="esperienze.html">Esperienze</a>
</li>
<li class="nav-item li li-modified">
<a class="nav-link" href="pittogrammi.html">Pittogrammi</a>
</li>
<li class="nav-item li li-modified">
<a id="linkRicerca" class="nav-link" href="ricerca.html">Ricerca</a>
</li>
<li class="li li-modified">
<a id="logoutBTN" class="button float-right">Logout</a>
</li>
</ul>
</div>
<div class="jumbotron text-center container-sm row pt-1 divcolor mb-1">
<div class="col-sm-2">
<img src="immagini/logoBIOLABnoBCK.png" class="mx-auto d-block img-fluid">
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Parola Chiave</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="" aria-describedby="basic-addon1" id="parolaChiave">
</div>
<div class="mb-3">
<button type="button" class="btn btn-lg float-right btn-color" id="buttonSubmit" data-dismiss="modal">Ricerca!</button>
</div>
<script id="template-container" type="text/x-handlebars-template">
<div id="template-container">
{{#each result}}
{{#ifEquals "ciao" "ciao"}}
<h1>########################</h1>
{{/ifEquals}}
{{#ifEquals TABELLA "reagenti"}}
<div id="main">
<div class="container">
<header class="text-center mb-5 text-white">
<div class="row">
<div class="col-lg-7 mx-auto">
<h1>Lista dei Reagenti</h1>
</div>
</div>
</header>
<div class="card-columns">
<!-- Produco una card per ogni record sul database-->
<div class="card mb-5">
<div class="bg-white p-3 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-2">{{this.NOME}}</h1>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-1">
<i class="fa fa-check mr-2">Formula: {{this.FORMULA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Aspetto: {{this.ASPETTO}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Ditta: {{this.DITTA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Scheda di Sicurezza: {{this.SCHEDA_SICUREZZA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Quantità: {{this.QUANTITA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Scadenza: {{this.SCADENZA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Conservazione: {{this.CONSERVAZIONE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Tipo di Conservazione: {{this.TIPO_CONSERVAZIONE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Luogo di Conservazione: {{this.LUOGO_CONSERVAZIONE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Codice Internazionale: {{this.CODICE_INTERNAZIONALE}}</i>
</li>
</ul>
</div>
</div>
<!-- Fine della produzione della card per ogni reagente -->
</div>
</div>
</div>
{{else}}
notfunctioning
{{/ifEquals}}
{{#ifEquals TABELLA "strumentazione"}}
<div id="main">
<div class="container">
<header class="text-center mb-5 text-white">
<div class="row">
<div class="col-lg-7 mx-auto">
<h1>Lista della Strumentazione</h1>
</div>
</div>
</header>
<div class="card-deck">
<!-- Produco una card per ogni record sul database-->
<div class="card mb-5">
<div class="bg-white p-3 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-2">{{this.TIPO}}</h1>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-1">
<i class="fa fa-check mr-2">Caratteristiche: {{this.CARATTERISTICHE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Tipo: {{this.ID}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Numero di Inventario: {{this.N_INVENTARIO}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Quantità: {{this.QUANTITA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Collocazione: {{this.COLLOCAZIONE}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Collocazione del Manuale: {{this.COLLOCAZIONE_MANUALE}}</i>
</li>
</ul>
</div>
</div>
<!-- Fine della produzione della card per ogni Strumento -->
</div>
</div>
</div>
{{else}}
notfunctioning
{{/ifEquals}}
{{#ifEquals TABELLA "attrezzatura"}}
<div id="main">
<div class="container">
<header class="text-center mb-5 text-white">
<div class="row">
<div class="col-lg-7 mx-auto">
<h1>Lista dell'Attrezzatura</h1>
</div>
</div>
</header>
<div class="card-deck">
<!-- Produco una card per ogni record sul database-->
<div class="card mb-5">
<div class="bg-white p-3 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-2 text-center">{{this.TIPO}}</h1>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-1">
<i class="fa fa-check mr-2">Tipo: {{this.ID}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Quantità: {{this.QUANTITA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Data Verifica Quantità: {{this.DATA_VERIFICA_QUANTITA}}</i>
</li>
<li class="mb-1">
<i class="fa fa-check mr-2">Collocazione: {{this.COLLOCAZIONE}}</i>
</li>
</ul>
</div>
</div>
<!-- Fine della produzione della card per ogni reagente -->
</div>
</div>
</div>
{{else}}
notfunctioning
{{/ifEquals}}
{{/each}}
</div>
</script>
</body>
</html>
您似乎在尝试将模板输出附加到不存在的元素中。
当您调用 $('#main').html(compiledTemplate(data)); 时，您要求 jQuery 找到具有 id="main" 的元素并将其内部 HTML 设置为调用 [=12] 的结果=].但是 jQuery 找不到带有 id="main" 的任何元素，因为 none 存在于您的文档中。
要证明 jQuery 找不到匹配元素，您可以 运行 以下内容：console.log($('#main').length)。如果结果为 0，那是因为 jQuery 没有找到匹配选择器的元素。
请务必注意，当您对空结果集调用 .html()（或任何其他方法）时，jQuery 不会抛出错误。这是因为即使是空结果集仍然是有效的 jQuery 结果对象。
您需要将缺少的元素添加到文档中：<div id="main"></div>。但请注意：您不想通过将其包含在模板中来复制此 ID。您模板中带有 id="main" 的元素需要不同的 ID。