我在弄清楚此车把代码有什么问题时遇到了麻烦，它是这样的：
{{#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);
}
});
我的问题是，即使始终为真，把手也不会向我显示condition（<h1>########################</h1>）内的代码。在运行站点时，我已经用console.log检查了这些值，它返回了正确的值。预先感谢您的任何回答！
$(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设置为调用compiledTemplate(data)的结果。但是jQuery找不到带有id="main"的任何元素，因为您的文档中不存在任何元素。
为了证明jQuery无法找到匹配的元素，您可以运行以下命令：console.log($('#main').length)。如果结果为0，则是因为jQuery未找到与选择器匹配的元素。
重要的是，当您在空结果集上调用.html()（或任何其他方法）时，jQuery不会引发错误。这是因为即使是空结果集也仍然是有效的jQuery结果对象。
您需要将丢失的元素添加到文档中：<div id="main"></div>。但请注意：您不想通过在模板中包含此ID来重复此ID。模板中带有id="main"的元素需要不同的ID。