使用js模板handlebars时html中代码报错

问答首页 → 移动开发技术

0 0

使用js模板handlebars时html中代码报错5

小弟刚在学handlebars遇到在body标签中写入带有{{name}}代码时报错如图：

刚学真是不知道是什么原因，希望哥哥姐姐们帮忙看下!

JavaScript

2014年5月19日 21:37

zxw394
7
0 0 3

查看图片附件

采纳的答案

题主啊，你看你的最后一行：
$(".mainBody").html(html);

页面中根本就没有这个元素啊。

附件是我改好的代码，你看看吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>handlebarExample.html</title>
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="handlebars-v1.3.0.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
     var source = $("#entry-template").html();
     var template = Handlebars.compile(source);
     var context = {title: "标题", body: "内容"}
     var html = template(context);
     $(".mainBody").html(html);
  });
</script>
</head>
<!-->为body添加样式<-->
<body class="mainBody">
<script id="entry-template" type="text/x-handlebars-template">
 <div class="entry">
 <h1>{{title}}</h1>
 <div class="body">
 {{body}}
 </div>
 </div>
</script>

</body>
</html>

2014年5月19日 21:58

xiaoyu1985ban
49
0 1 12

2条评论

0 0

<!DOCTYPE html>
<html>
<head>
<title>Handlebars Expressions Example</title>
</head>
<body>
<h1>
Handlebars Expressions Example!
</h1>

<div id="list">
</div>

<script type="text/javascript" src='#'" /jquery.js">
</script>
<script type="text/javascript" src='#'" /handlebars-1.0.0.beta.6.js">
</script>

<script id="people-template" type="text/x-handlebars-template">
{{#people}}
        <div class="person">
          <h2>{{first_name}} {{last_name}}</h2>
          <div class="phone">{{phone}}</div>
          <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
          <div class="since">User since {{member_since}}</div>
        </div>
      {{/people}}
    </script>

<script type="text/javascript">
$(document).ready(function() {

// compile our template
var template = Handlebars.compile($("#people-template").html());

var data = {
people : [ {
first_name : "rui",
last_name : "fengyun",
phone : "1234567890",
email : "alan@test.com",

member_since : "Mar 25, 2011"
}, {
first_name : "Allison",
last_name : "House",
phone : "0987654321",
email : "allison@test.com",

member_since : "Jan 13, 2011"
}, {
first_name : "Nick",
last_name : "Pettit",
phone : "9836592272",
email : "nick@test.com",

member_since : "Apr 9, 2009"
}, {
first_name : "Jim",
last_name : "Hoskins",
phone : "7284927150",
email : "jim@test.com",

member_since : "May 21, 2010"
}, {
first_name : "Ryan",
last_name : "Carson",
phone : "8263729224",
email : "ryan@test.com",

member_since : "Nov 1, 2008"
} ]
};

$('#list').html(template(data));
});
</script>
</body>
</html>

感觉你那写法有点按照这个参考重新试试