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

问题描述

小弟刚在学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>感觉你那写法有点 按照这个参考 重新试试

时间: 2024-07-28 12:19:36

使用js模板handlebars时html中代码报错的相关文章

svn-在Myeclipse中保存代码时,SVN总是报错,已百度,答案五花八门。求指导 谢谢!

问题描述 在Myeclipse中保存代码时,SVN总是报错,已百度,答案五花八门.求指导 谢谢! 写完一段代码按保存(CTRL+S)时 总是报这样的错误 解决方案 http://zhidao.baidu.com/link?url=gLO2oBMgYsBRCUQVbUzkuWP3geLbG-_cBa6bdDSnxrVNkrNp8rnli7U0mGz-6SW2_qccL6tVVNPepFEaoCfIu6rApe2lVmVFlKGBAbDlCJ_ http://zhidao.baidu.com/lin

js添加到收藏夹中代码

js添加到收藏夹中代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.jzread.com/1999/xhtml"> <head> <meta http-equi

svn-通过SVN更新别人的代码到我的eclipse中为什么报错,求大神解答

问题描述 通过SVN更新别人的代码到我的eclipse中为什么报错,求大神解答 解决方案 这个不影响项目运行的, 解决方案二: 这是纠错器的原因,并不影响运行.有时候莫名其妙就好了. 解决方案三: 你看看是什么错误, 有些是因为对你的xml 文件进行合法性验证. 解决方案四: 谢谢.csdn真强大,第一次用就有答案 解决方案五: 这是纠错器的原因,并不影响运行.有时候莫名其妙就好了. 解决方案六: myeclipse对xml以及js验证问题,,可以忽略 解决方案七: 不影响运行的话不用过于在意.

textview代码中id报错

问题描述 textview代码中id报错 TextView textView = (TextView) findViewById(R.id.mainTextView1); textView.setText("Correct!"); id 报错是什么情况该怎么解决 解决方案 没找到空间,检查下它是不是嵌套在别的控件里了. 解决方案二: 没找到控件,检查下它是不是嵌套在别的控件里了.

安卓音乐播放器-为何音乐播放器代码在esclipse中没报错,点击按钮却没有实现功能,上图上代码,求前辈们指教

问题描述 为何音乐播放器代码在esclipse中没报错,点击按钮却没有实现功能,上图上代码,求前辈们指教 Mainactivity package com.example.music; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.content.Broadc

python在shell中运行正常,但在windows中经常报错

问题描述 python在shell中运行正常,但在windows中经常报错 我写了一个获取网页信息的文件,在shell中测试,运行情况良好,但是直接双击打开py文件,则经常闪退.以下是代码.这种情况我不是很了解,求帮助. # -*- coding: utf-8 -*-import urllib2import urllibimport reimport threadimport timeimport json#----------加载处理Steam市场--------------class Spi

js加载文件-js文件加载问题求解,总是报错

问题描述 js文件加载问题求解,总是报错 试了各种方法都不好使 主要为了测试加载机制,以便把test.js提取出来加密 <script type="text/javascript" src="test.js" charset="utf-8"> </script> <script> test();//alert(123);test中就一个函数,弹出123;如此加载一切正常 </script> 下面我来

Android开发中Eclipse报错及对应处理方法总结_Android

本文较为详细的总结了Android开发中Eclipse报错及对应处理方法.分享给大家供大家参考,具体如下: 报错1: Conversion to Dalvik format failed with error 1 报错原因:原因是我在android工程中不小心多导入Java的mina,结果一跑程序就报这个错误. 解决方法:将Java中用到的mina包移除,就OK了. 小结:以后遇到这种报错时,记得提醒自己可能是由于自己导错包了. 附: 网上其他处理方法:<丢失Android系统库或者Conver

eclipse启动项目时遇到问题,报错!

问题描述 eclipse启动项目时遇到问题,报错! FATAL ERROR in native method: JDWP No transports initialized, jvmtiError=AGENT_ERROR_TRANSPORT_INIT(197) ERROR: transport error 202: connect failed: Connection timed out ERROR: JDWP Transport dt_socket failed to initialize,