0
我想顯示一個json字符串到一個HTML文件中。 JSON字符串看起來是這樣的:jones不工作的mustache.js模板?
{"Time":1434819678189,"Name":"flight.LOL123 ","Hex":"3c5451","Squawk":"5430","Altitude":36000,"VerticalRate":64,"Latitude":69.287773,"Longitude":99.338745,"Track":294,"Speed":429,"LastSeen":0,"Messages":4873}
,並與我的小鬍子模板中的HTML源代碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ADSB Data | Alerts</title>
<script src="js/socket.io-1.3.5.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/script.js"></script>
<script src="js/mustache.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
background: url('img/bkg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbotron {
background: rgb(224,224,224); /* This is for ie8 and below */
background: rgba(224,224,224, 0.85);
}
</style>
</head>
<body >
<div class="container">
<div class="jumbotron" id="alert">
<p>Alert list</p>
</div>
</div>
<script>
var socket = io('http://localhost:7777');
socket.on('message', function (msg) {
var div = document.getElementById ("alert");
var template = "<p>Time: {{Time}}</p>" +
"<p>Name: {{Name}}</p> " +
"<p>Hex: {{Hex}}</p> " +
"<p>Squawk: {{Squawk}} </p>" +
"<p>Altitude: {{Altitude}} </p>" +
"<p>Vertical Rate: {{VerticalRate}}</p>" +
"<p>Latitude: {{Latitude}} </p>" +
"<p>Longitude: {{Longitude}} </p>" +
"<p>Heading: {{Track}} </p>" +
"<p>Speed: {{Speed}} </p>" +
"<p>Lat seen: {{LastSeen}} </p>" +
"<p>Messages: {{Messages}} </p>";
var html = Mustache.to_html(template, msg);
div.innerHTML = "<h1>Alert!</h1>" + html + "</div>";
});
</script>
</body>
</html>
我唯一看到的是每個值之前的字符串,如「消息:「 如果我自己打印'味精'變種,我得到像上面的JSON沒有任何問題。 我在模板中做了什麼錯誤?
謝謝!