Jquery Handlebar模板呈现无内容的html
主文件：Jquery Handlebar模板呈现无内容的html,jquery,json,ajax,handlebars.js,Jquery,Json,Ajax,Handlebars.js,主文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Teacher</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
<link rel="stylesheet" href="/css/users.css" >
</head>
<body>
<div class="wrapper">
<!-- Page Header -->
<div class="header">
<button type="button" class="btn btn-default toggle">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-cog"></span>
Settings
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#"><b>{{name}}</b></a></li>
<li role="separator" class="divider"></li>
<li class="logout"><a href="/sign-in">Logout</a></li>
</ul>
</div>
</div>
<!-- Left Navbar -->
<div class="sidebar">
<ul class="nav">
<li><a href="/teacher"><i class="glyphicon glyphicon-lock"></i><span> Course Management</span></a></li>
<li><a href="/teacher/createCourse"><i class="glyphicon glyphicon-film"></i><span> Create Course</span></a></li>
</ul>
</div>
<div class="content">
<div class="container-fluid">
{{{ body }}}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{{{_sections.handlebars}}}
{{{_sections.script}}}
<script src="/js/teacher.js"></script>
</body>
</html>
Handerbar可以处理数组本身。每个不需要使用$。只需使用{{each}{{/each}呈现所有数组 已经修改了您的代码，并且工作正常。你可以在你的手机上测试。我使用了本地json数组来呈现。您只需对它进行注释并取消对$.get函数的注释，如果您的get函数数据是给定格式的数组，那么它将非常有效 代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Teacher</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
<link rel="stylesheet" href="/css/users.css">
</head>
<body>
<div class="wrapper">
<!-- Page Header -->
<div class="header">
<button type="button" class="btn btn-default toggle">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-cog"></span> Settings
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#"><b>{{name}}</b></a></li>
<li role="separator" class="divider"></li>
<li class="logout"><a href="/sign-in">Logout</a></li>
</ul>
</div>
</div>
<!-- Left Navbar -->
<div class="sidebar">
<ul class="nav">
<li><a href="/teacher"><i class="glyphicon glyphicon-lock"></i><span> Course Management</span></a></li>
<li><a href="/teacher/createCourse"><i class="glyphicon glyphicon-film"></i><span> Create Course</span></a></li>
</ul>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<h1>Manage Courses</h1>
<div class="courses"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/handlebars-v4.0.5.js"></script>
<script type="application/javascript">
$(function() {
/* for local use only to test */
var data = [
{
"coursecode": "ELEC 101",
"coursename": "Introduction to Electrical engineering"
},
{
"coursecode": "SYSC 102",
"coursename": "Object-Oriented Programming"
},
{
"coursecode": "ELEC 301",
"coursename": "Electronics I"
},
{
"coursecode": "SYSC 402",
"coursename": "Real-Time Systems"
},
{
"coursecode": "BUSI 101",
"coursename": "Introduction to Business Models"
},
{
"coursecode": "ECON 102",
"coursename": "Economic paradigms"
}
];
let source = $('#course-template').html();
let template = Handlebars.compile(source);
let placeHolder = $('.courses');
var html = template(data);
placeHolder.append(html);
/* test code ends here */
/* uncomment below code and comment test code */
// $.get("/json/courses.json", function(data, status, xhr) {
// let source = $('#course-template').html();
// let template = Handlebars.compile(source);
// let placeHolder = $('.courses');
// var html = template(data);
// placeHolder.append(html);
// });
});
</script>
<script id="course-template" type="text/x-handlebars-template">
<div class="panel panel-default">
{{#each this }}
<div class="panel-heading">{{coursecode}}</div>
<div class="panel-body">
<a href="">{{coursename}}</a>
</div>
{{/each }}
</div>
</script>
</body>
</html>
谢谢，我已经修好了
[
{
"coursecode": "ELEC 101",
"coursename": "Introduction to Electrical engineering"
},
{
"coursecode": "SYSC 102",
"coursename": "Object-Oriented Programming"
},
{
"coursecode": "ELEC 301",
"coursename": "Electronics I"
},
{
"coursecode": "SYSC 402",
"coursename": "Real-Time Systems"
},
{
"coursecode": "BUSI 101",
"coursename": "Introduction to Business Models"
},
{
"coursecode": "ECON 102",
"coursename": "Economic paradigms"
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Teacher</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
<link rel="stylesheet" href="/css/users.css">
</head>
<body>
<div class="wrapper">
<!-- Page Header -->
<div class="header">
<button type="button" class="btn btn-default toggle">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-cog"></span> Settings
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#"><b>{{name}}</b></a></li>
<li role="separator" class="divider"></li>
<li class="logout"><a href="/sign-in">Logout</a></li>
</ul>
</div>
</div>
<!-- Left Navbar -->
<div class="sidebar">
<ul class="nav">
<li><a href="/teacher"><i class="glyphicon glyphicon-lock"></i><span> Course Management</span></a></li>
<li><a href="/teacher/createCourse"><i class="glyphicon glyphicon-film"></i><span> Create Course</span></a></li>
</ul>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<h1>Manage Courses</h1>
<div class="courses"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/handlebars-v4.0.5.js"></script>
<script type="application/javascript">
$(function() {
/* for local use only to test */
var data = [
{
"coursecode": "ELEC 101",
"coursename": "Introduction to Electrical engineering"
},
{
"coursecode": "SYSC 102",
"coursename": "Object-Oriented Programming"
},
{
"coursecode": "ELEC 301",
"coursename": "Electronics I"
},
{
"coursecode": "SYSC 402",
"coursename": "Real-Time Systems"
},
{
"coursecode": "BUSI 101",
"coursename": "Introduction to Business Models"
},
{
"coursecode": "ECON 102",
"coursename": "Economic paradigms"
}
];
let source = $('#course-template').html();
let template = Handlebars.compile(source);
let placeHolder = $('.courses');
var html = template(data);
placeHolder.append(html);
/* test code ends here */
/* uncomment below code and comment test code */
// $.get("/json/courses.json", function(data, status, xhr) {
// let source = $('#course-template').html();
// let template = Handlebars.compile(source);
// let placeHolder = $('.courses');
// var html = template(data);
// placeHolder.append(html);
// });
});
</script>
<script id="course-template" type="text/x-handlebars-template">
<div class="panel panel-default">
{{#each this }}
<div class="panel-heading">{{coursecode}}</div>
<div class="panel-body">
<a href="">{{coursename}}</a>
</div>
{{/each }}
</div>
</script>
</body>
</html>