Я пытаюсь заставить работать шаблоны для фиктивных данных до того, как я использую данные из бэкэнда.
Я планирую заменять фиктивные данные на моей клиентской стороне JavaScript фактическими данными из ответа сервера при каждом нажатии кнопки. Прямо сейчас я использую сервер express + node.js.
Когда я запускаю 'node submit_form. js', а затем go на http://localhost: 8000 / search_results_page и нажмите кнопку «Отправить», веб-страница никогда не отображает данные, переданные в шаблон. В результате на веб-странице отображается только «тратит».
Однако, когда я go перехожу к файлу stati c ../search_results_page.html и нажимаю кнопку «отправить», страница правильно отображает данные, переданные в шаблон. На странице отображается «Джо тратит 6».
Я не уверен, что изменить в моем бэкэнде (или во внешнем интерфейсе), чтобы данные отображались правильно.
Мой файл search_results_page. html выглядит так:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/jquery-serializejson/jquery.serializejson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/mgalante/jquery.redirect/master/jquery.redirect.js"></script>
<link rel="shortcut icon" href="#" />
<script src="submit_form.js"></script>
</head>
Search Results List <br><br>
Each result first displays the ID and then the relevance score (in decreasing order).<br><br>
<input type="submit" id="submitButton" value="Submit">
<div id ="results_div">
</div>
<script type="text/html" id="template">
<ul id="results_list">
{{#results_list}}
<br><br>
<li><a href="https://www.ncbi.nlm.nih.gov/books/{{id}}">{{id}}</a> {{name}} {{relevance_score}}</li>
{{/results_list}}
{{^results_list}}No results for results list.{{/results_list}}
</ul>
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#submitButton").click(function() {
var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
};
template = $('#template').html();
var output = Mustache.render("{{title}} spends {{calc}}", view);
$('#results_div').append(output);
});
});
</script>
</html>
А код моего сервера, содержащийся в submit_form. js ':
var express = require('express')
var path = require('path')
var http = require('http'); // this is new
var mustache = require("mustache");
var fs = require("fs")
var router = express.Router()
var app = express();
var engines = require('consolidate');
app.engine('html', engines.hogan); // tell Express to run .html files through Hogan
app.set('views', __dirname); // tell Express where to find templates, in this case the '/templates' directory
app.set('view engine', 'html'); //register .html extension as template engine so we can render .html pages
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'static')));
app.listen(8000, () => {
console.log('Example app listening on port 8000!')
});
app.get('/', (req, res) => {
res.render('search_engine.html', {'results_list':[]});
});
app.get('/search_results_page', (req, res) => {
res.render('search_results_page.html', {'results_list':[]});
});