马不停蹄，接着DWR学习jsTemplate

最新推荐文章于 2019-08-02 14:45:47 发布

Bob1228

最新推荐文章于 2019-08-02 14:45:47 发布

阅读量124

点赞数

文章标签： DWR JavaScript VC++ VB HTML ViewUI

关键字: AJAX

作者：javafish（likunkun）
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>

代码

<tr>
<td>性别</td>
<td>${sex|default:"男"}</td>
</tr>

代码

<td>${welcome|default:"客人"}</td>

代码

{if testExpr}
{elseif testExpr}
{else}
{/if}

代码

{for varName in listExpr}
{/for}
{for varName in listExpr}
...main body of the loop...
{forelse}

代码

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}

代码

<!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>

代码

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));
}

运行看一下结果吧

java.PNG
描述:	结果图
文件大小:	30 KB
看过的:	文件被下载或查看 41 次
下载

DWRStudy-----jsTemplate源代码.rar
描述:	基于DWRStudy的jsTemplate源代码	下载
文件名:	DWRStudy-----jsTemplate源代码.rar
文件大小:	29 KB
下载过的:	文件被下载或查看 41 次