问题描述
小弟刚在学handlebars遇到在body标签中写入带有{{name}}代码时 报错如图: 刚学真是不知道是什么原因,希望哥哥姐姐们帮忙看下!
解决方案
题主啊,你看你的最后一行: $(".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>
解决方案二:
<!DOCTYPE html><html><head><title>Handlebars Expressions Example</title></head><body><h1>Handlebars Expressions Example!</h1><!--this is a list which will rendered by handlebars template. --><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 templatevar 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>感觉你那写法有点 按照这个参考 重新试试