把手模板渲染html没有内容
主文件：
<!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>
要添加的模板：
<div class="row">
<div class="col-md-7">
<h1>Manage Courses</h1>
<div class="courses"></div>
</div>
</div>
<script id="course-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading">{{coursecode}}</div>
<div class="panel-body">
<a href="">{{coursename}}</a>
</div>
</div>
</script>
{{#section 'handlebars'}}
<script src="js/handlebars-v4.0.5.js"></script>
{{/section}}
{{#section 'script'}}
<script type="application/javascript">
$(function() {
let source = $('#course-template').html();
let template = Handlebars.compile(source);
console.log(source);
let placeHolder = $('.courses');
$.get("/json/courses.json", function(data, status, xhr){
$.each(data, function(index,element){
var html = template(element);
placeHolder.append(html);
});
});
});
</script>
{{/section}}
要渲染的JSON：
[
{
"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"
}
]
我试图通过ajax读取json文件并显示在主文件上，但页面只显示div而不是文本（coursecode和coursename）。
我想要的。
我得到了什么：
1 个答案:
答案 0 :(得分：1)
Handerbar可以处理数组本身。无需使用$ .each。只需使用{{#each}} {{/each}}.
修改了你的代码，它运行正常。你可以在你的mahine上测试它。我已经使用本地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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？