浏览 6979 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2006-12-27
Email:javafish@sunxin.org 接着JsTemplate是用于javascript把远程传过来的对象,在HTML里渲染.拿上面的例子来说吧,我们点击按得到javafish的信息的时候会发现,得到的姓名,年龄,住址只显示在一行文本里.如果我想把javafish的信息写成一张表格呢,当然可以用javascript使id为result的div的innerHTML=”<&gl<table…..”需要加上很多的转义字符,一很困难,二不好维护,三不不直观还容易错。如果用jsTemplate问题就非常好解决了。 可以在http://www.trimpath.com/project/wiki/JavaScriptTemplates获得jstemplate的官方资料. jsTemplate最新的版本是1.038不过这已经是2005年7月8日发布的了 还是上面DWR的那个AnnotationSpring例子不过我们把javafish的信息放到表格里. 先在官方下载template.js文件,然后在AnSpringUserInfoHtml.html里导入这个js文件:<script type='text/javascript' src='template.js'></script> 然后在AnSpringUserInfoHtml.html里加入一个隐藏的textare: <textarea id="person" style="display:none;"> <table> <tr> <td>姓名:</td> <td>${username}</td> </tr> <tr> <td>年龄:</td> <td>${age}</td> </tr> <tr> <td>住址:</td> <td>${address}</td> </tr> <tr> <td>我们欢迎:</td> <td>${welcome}</td> </tr> </table> </textarea> 最后在自己发挥的那个anspringuserInfo.js把DWR的回调函数写成: var user = msg; DWRUtil.setValue('result',TrimPath.processDOMTemplate("person", user)); 大功告成运行一下服务器看看吧.javafish的信息就以表格的形式给出来了 这也算是个HelloWorld例子了吧,不过这也已经把jsTemplate用的差不多了,jsTemplate非常的简单,不过有些地方需要一些技巧,…等到后面再说吧. 先解释一下上面的用法: Template.js是解悉模板的函数库(具体一会细说),在AnSpringUserInfoHTML.html里写入要渲染的模板,官方推荐是写在一个隐藏的textare里(用别的也可以不过在有时候会发生一些问题,还是推荐用textare)比如:<textare id=”..” style=”display:none”>在这里添加jsTemplate模板</textare>,而模板呢,一般静态的来说就是HTML代码,不过变量就用类似于表达式语言(其实很像freemaker).在上面例子中的模板里大家都想知道的就是类似${username}的东西吧,大家看一下回调函数传回来的对象是什么,就是User类的getUser方法,返回的是User对象,而现在用${}引用的正是这个对象里的成员,而它们之间是怎么联系起来的呢?一开始回调函数回传的msg就是User类的getUser的返回值user对象,然后把msg传给新定义的user再用TrimPath.processDOMTemplate("person", user) 就把回传的user对象和id为person的textare联系到一起了. 下面分别研究一下jsTemplate的API,语法: 其实我们就用到一个API-TrimPath.processDOMTemplate(),其它都是自己内部用(可以具一下官方的template.js文件的代码).这个函数的返回的就是一个innerHTML,而对于${}里面的变量有几个属性: 1. capitalize大写,可以在上面的例子中的username作文章:${username|capitalize}运行一下会发现原来的javafish成了JAVAFISH了 2. default:”值” 当${}里的变量为null的时候以默认设置的代替,还是上面那个例子:不过加上点东西 <tr> <td>性别</td> <td>${sex|default:"男"}</td> </tr> 和 <td>${welcome|default:"客人"}</td> 可是结果呢,并不如人意在性别上显示:性别 [ERROR: ReferenceError: sex is not defined; sex is not defined] 在欢迎词上一点东西也不显示! 这是因为default只是显示为null的,而上面的第一个sex无论是在服务器端,还是客户端的对象里都是没有定义的,所以会出现异常. 第二个的welcome虽然已经被定义了,但是它不是null它是””.,不过这些我们可以在服务端把welcome设为null,现在看一下服务端的代码,发现对象中有一个是null的就是books,现在把上面性别的代码的sex改成books试试,呵呵成功了 3. eat 吃掉,这个属性很有用,当我们想用${}访问运行对象里的函数但又不想有内容输出的时候就用这个属性. escape 转换HTML代码使之可以输出,还是上面的例子,运行一下,在请输入自己的名字后面的文本框里输入<font color='red'>likunkun</font>点击得到javafish的信息,看到欢迎词不是 欢迎<font color='red'>likunkun</font>而是:欢迎likunkun,likunkun的颜色变成了红色的了,这也不是我们想要的,怎么才能让结果出现欢迎<font color='red'>likunkun</font>呢?这就用到escape属性了,把${welcome}改成${welcome|escape}运行一下就出现我们想要的结果了:我们欢迎: <font color='red'>likunkun</font> 下面看一下jsTemplate模板的语法: 1. 定义数据,jsTemplate模板的定义数据的方法和javascript中是一样的(用var) 2. 控制流,官方给的不错: {if testExpr} {elseif testExpr} {else} {/if} 这些语句是可以嵌套的(和vb里面的IF有点像),一会面有个综合的例子的. 在jsTemplate里有一个配合if的函数defined()[defined是来判断传入的对象是否已被定义] 3. 循环,官方给的也很好: {for varName in listExpr} {/for} {for varName in listExpr} ...main body of the loop... {forelse} 当迭代的List为null或它的长度为0的时候输出的 {/for} 可以看一个例子来体会这个循环的用法: var book = {java[{title:javaWeb 开发详解,author:孙鑫},{title:vc++深入详解,author:孙鑫}]}; 我们就可以用 {for bk in java} bk.title,bk.author {forelse} 没有书 {/for} 可能大家有些问题是:如果一个纯Array数组怎么办呢{for}里面的bk in 什么呢? 我在javaeye发了一个讨论帖http://www.iteye.com/topic/40368,可以看一下. 自己想了个变通的小技巧就是: 如果var book = {{title:"java web开发详解", author:"孙鑫"},{title:"vc++深入详解", author:"孙鑫"}}; 我们在javascript里加入 var jsbook = book; jsbook.sbook=book; 然后这样 {for bks in sbook} <tr><td>${bks.title}</td><td>${bks.author}</td> </tr> {forelse} <tr><td colspan="2">没有书</tr> {/for} 就ok了嘻嘻 4. {CDATA}这里的代码将被jsTemplate忽略{/CDATA} 5. 在jsTemplate模板里加入javascript的时候用{eval}{/eval} 6. 有的时候可能会在html代码里面放入javascript比如<input type=”button” onclick=”alert(‘你好!’);”/>不过代码可能不会是一句alert()这么简单,可能会很多行,这就需要用{minify}{/minify}来包围这些行,而{minify}不但可以用于javascript中还可以把CSS用于html的style中. 最后看一个综合的例子,: 还是上面DWR的例子UserInfo.html吧 现在我把它改的一塌糊涂了: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>UserInfo.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' src='template.js'></script> <script type='text/javascript' src='dwr/interface/jsuser.js'></script> <script type='text/javascript' src='dwr/engine.js'></script> <script type='text/javascript' src='dwr/util.js'></script> <script type="text/javascript" src="userInfo.js"></script> </head> <body> 请输入你的名字: <input id="name" type="text"/> <input id="jbutton" type="button" value="得到javafish的信息"/> <input id="sbutton" type="button" value="得到javafish的书"/> <div id="result"></div> <script>load()</script> <textarea id="books" style="display:none"> <table style="{minify} background-color:red; font-size:small; color:green; {/minify}"> <tr><td>书名</td><td>作者</td></tr> {for bks in javabook} <tr><td>${bks.name}</td><td>${bks.author}</td></tr> {forelse} <tr><td colspan=2>当前没有书</td></tr> {/for} <tr><td>{cdata}${bks.name}它本来应该输出书名可是现在被jsTemplate忽略了{/cdata}</td></tr> <input type='button' value='确定' onclick='{minify} alert("多行中的第一行"); alert("多行中的第二行"); {/minify}'/> <input id="li" type='button' value="eval测试" onclick="evalonclick()"/> {eval} evalonclick=function() { alert("测试一下eval"); } {/eval} </table> </textarea> <textarea id="person" style="display:none;"> <table> <tr> <td>姓名:</td> <td>${username|capitalize}</td> </tr> <tr> <td>年龄:</td> <td>${age}</td> </tr> <tr> <td>用sex表示的性别</td> <td>{if defined("sex")} ${sex|default:"男"} {else} 用sex表示的性别没有定义 {/if}</td> </tr> <tr> <td>住址:</td> <td>${address}</td> </tr> <tr> <td>我们欢迎:</td> <td>${welcome|escape}</td> </tr> </table> </textarea> </body> </html> 然后把UserInfo.js的回调函数改为 function callbackBooks(msg) { var book = msg; book.javabook=msg; DWRUtil.setValue('result',TrimPath.processDOMTemplate("books", book)); } function callback(msg) { var user = msg; DWRUtil.setValue('result',TrimPath.processDOMTemplate("person", user)); } 这样的话上面的例子基本上把jsTemplate的的内容含盖了. 运行看一下结果吧 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2006-12-27
上面的第一句话应该是"接着DWR的学习文档(Hello World,类型转换,Spring,Annotation)http://www.iteye.com/topic/40313"
我发了帖了之后发现帖子在编辑的时候出现bug,以致无法编辑,就在此跟帖了 |
|
返回顶楼 | |
发表时间:2006-12-27
以前我发过一个 我修改争强后的 jsTemplate
楼主有兴趣看一看吧 有机会我们可以一起再争强一下 呵呵 |
|
返回顶楼 | |
发表时间:2006-12-28
这个标签
${expr} 跟JSP-EL冲突啊。。。好可惜。。 |
|
返回顶楼 | |
发表时间:2006-12-28
boin 写道 这个标签 在写jsp中jsTemplate的时候在${name}的前面加反斜行即可
${expr} 跟JSP-EL冲突啊。。。好可惜。。 |
|
返回顶楼 | |
发表时间:2006-12-29
你可以把这个文件放在一个外部文件中。
通过ajax异步的拿到这个jst文件的内容。 |
|
返回顶楼 | |