`
likunkun
  • 浏览: 91766 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

马不停蹄,接着DWR学习jsTemplate

    博客分类:
  • 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>

最后在自己发挥的那个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的的内容含盖了.


运行看一下结果吧
  • 描述: 结果图
  • 大小: 31 KB
分享到:
评论
5 楼 dengyin2000 2006-12-29  
你可以把这个文件放在一个外部文件中。

通过ajax异步的拿到这个jst文件的内容。
4 楼 likunkun 2006-12-28  
boin 写道
这个标签
${expr}

跟JSP-EL冲突啊。。。好可惜。。
在写jsp中jsTemplate的时候在${name}的前面加反斜行即可
3 楼 boin 2006-12-28  
这个标签
${expr}

跟JSP-EL冲突啊。。。好可惜。。
2 楼 fins 2006-12-27  
以前我发过一个 我修改争强后的 jsTemplate
楼主有兴趣看一看吧 有机会我们可以一起再争强一下 呵呵
1 楼 likunkun 2006-12-27  
上面的第一句话应该是"接着DWR的学习文档(Hello World,类型转换,Spring,Annotation)http://www.iteye.com/topic/40313"
我发了帖了之后发现帖子在编辑的时候出现bug,以致无法编辑,就在此跟帖了

相关推荐

    springboot整合dwr实现js调用java方法

    &lt;script src="/dwr/interface/MyService.js"&gt; MyService.getHello('World', function(response) { alert(response); }); ``` JSP示例: ```jsp &lt;%@ include file="/dwr/interface/MyService.jsp" %&gt; ...

    DWR的学习资料,DWR学习必备

    总的来说,这个压缩包提供了一个全面的学习DWR的资源集合,从理论知识到实践案例,覆盖了DWR的方方面面。通过深入研究这些材料,你不仅可以了解DWR的工作机制,还能学会如何在实际项目中有效地应用它,提升Web应用的...

    DWR学习资料

    DWR学习资料 :DWR 3.0 上传文件.txt DWR3.0反向Ajax示例.txt DWR3.0学习笔记.txt DWR3.0学习网址.txt dwr分页.doc DWR分页代码.doc DWR中文文档.doc DWR中文文档.pdf dwr做comet的完整实现.doc Spring整合DWR comet ...

    DWR(包括engine.js+util.js).rar

    这个压缩包包含了DWR的核心组件`engine.js`和辅助库`util.js`,它们是实现DWR功能的关键。 `engine.js`是DWR的核心脚本,它实现了JavaScript和Java之间的远程调用(Remote Procedure Calls, RPC)。这个文件处理了...

    DWR所需js文件及jar包以及配置说明

    - `dwr.engine.js`: 这是DWR的核心引擎,负责处理与服务器的通信,包括AJAX请求、反向Ajax和对象的序列化与反序列化。 - `util.js`: 提供了一系列实用工具函数,用于增强JavaScript功能,如类型检查、字符串处理等...

    dwr js包 DwrEngine.js+DwrUtil.js

    标题中的"DwrEngine.js"和"DwrUtil.js"是DWR的核心JavaScript库文件。`DwrEngine.js`提供了与服务器通信的主要接口,实现了AJAX调用的底层逻辑,包括异步请求的发送、响应的处理以及错误管理等。`DwrUtil.js`则是...

    dwr util.js engine.js

    在这个上下文中,"util.js" 和 "engine.js" 是DWR框架的核心组件。 `util.js` 是DWR的工具库,它包含了各种实用函数,用于帮助开发者处理JavaScript中的常见任务。这个库提供了如对象操作、数组处理、字符串操作、...

    dwr dwr项目 js 调用 java 后台 方法 js调用java后台方法 后台方法 异步

    下面将详细阐述DWR的工作原理、配置过程以及如何使用DWR实现JS调用Java后台方法。 1. **DWR概述** DWR的核心功能是提供一种安全、高效的远程方法调用机制,通过HTTP协议在客户端(浏览器)和服务器之间传递数据。...

    DWR中JS的引用路径问题【前台web】

    ### DWR中JS的引用路径问题详解 #### 一、背景介绍 在Web开发中,JavaScript(简称JS)是前端开发的重要组成部分之一。Direct Web Remoting (DWR) 是一个强大的Java库,它使得JavaScript能够直接调用Java方法,极...

    DWR案例 js嗲用java代码

    这个案例是关于如何使用DWR来实现在JavaScript中调用Java代码的一个实例,特别适合初学者了解和学习。 DWR的核心思想是创建一个在客户端和服务器端之间的桥梁,使得JavaScript可以像调用本地函数一样调用远程的Java...

    dwr学习教程3

    【DWR学习教程3】是针对Direct Web Remoting (DWR)这一JavaScript和Java之间的通信框架的深入学习资料。DWR允许在Web浏览器和服务器之间进行实时、安全且高效的交互,使得前端JavaScript能够调用后端Java方法,极大...

    dwr util.js

    《DWR util.js详解及其应用》 DWR (Direct Web Remoting) 是一种在Web应用程序中实现客户端与服务器端通信的技术,它允许JavaScript代码直接调用Java方法,从而提供了更高效的异步数据交互。在DWR框架中,`util.js`...

    DWR框架配置学习教程

    ### DWR框架配置学习教程 #### 一、DWR框架简介与配置 DWR(Direct Web Remoting)是一个用于简化Ajax应用开发的框架,它可以让客户端JavaScript代码直接调用服务器端Java方法,从而大大简化了前端与后端的交互...

    DWR 教程 中文API DWR.xml配置文件说明 DWR学习笔记

    首先,"DWR学习笔记"提供了对DWR基础概念、核心功能以及实际应用的概述。这些笔记可能包含了DWR的基本架构,如它如何通过AJAX技术实现实时的Web交互,以及如何创建和调用服务器端的Java方法。 "DWR中文API"是DWR库...

    dwr测试,java调用js

    标题“dwr测试,java调用js”表明我们将探讨如何通过DWR进行测试,并演示Java如何调用JavaScript代码。DWR提供了两种主要的交互模式:`Call`和`Reverse Call`。`Call`模式是常规的前端到后端的通信,而`Reverse Call...

    DWR util.js 学习笔记 整理

    DWR util.js 学习笔记整理 DWR util.js 是一个功能强大的 JavaScript 库,它提供了许多有用的函数,可以帮助开发者在客户端页面上实现各种操作。下面是对 DWR util.js 的学习笔记整理。 1. $() 函数 DWRUtil 中的...

    dwr 例子,jar包,engine.js util.js 学习笔记

    这个压缩包包含的是DWR的实例、相关的jar包以及两个重要的JavaScript文件——`engine.js`和`util.js`,这些都是学习DWR的关键组件。 1. **DWR基础概念**: DWR的核心功能是提供一种方式,使得客户端JavaScript可以...

    DWR2学习整理资料

    6. **JSP使用**:在JSP页面中引入DWR的核心引擎engine.js、工具包util.js以及自动生成的DWRService.js。在JavaScript中直接调用远程服务类的方法。 **util.js函数库:** util.js是DWR提供的一组工具函数,可用于...

    DWR学习案例详解(数据库)

    在这个DWR学习案例中,你可能会看到如何设置DWR环境,创建Java和JavaScript接口,以及如何进行数据库操作的示例。案例可能包括创建用户界面元素,如表格或表单,用于显示和编辑数据;编写服务器端的Java方法,处理...

    DWR框架学习资料...

    - "DWR学习.ppt":可能深入探讨了DWR的高级特性,如批处理、安全控制和性能优化,适合对DWR有一定了解的学习者提升技能。 6. **学习DWR的好处** - **提升效率**:DWR简化了AJAX开发,减少了前端与后端之间的沟通...

Global site tag (gtag.js) - Google Analytics