Jtemplete/客户端模板的脚本渲染引擎

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:

Java代码
  1. <textarea id="person" style="display:none;">  
  2.         <table>  
  3.             <tr>  
  4.                 <td>姓名:</td>  
  5.                 <td>${username}</td>  
  6.             </tr>  
  7.             <tr>  
  8.                 <td>年龄:</td>  
  9.                 <td>${age}</td>  
  10.             </tr>  
  11.             <tr>  
  12.                 <td>住址:</td>  
  13.                 <td>${address}</td>  
  14.             </tr>  
  15.             <tr>  
  16.                 <td>我们欢迎:</td>  
  17.                 <td>${welcome}</td>  
  18.             </tr>  
  19.         </table>  
  20.     </textarea>  
<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是解悉模板的函数库。

渲染的模板,官方推荐是写在一个隐藏的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的时候以默认设置的代替,还是上面那个例子:不过加上点东西

Java代码
  1. <tr>  
  2.                 <td>性别</td>  
  3.                 <td>${sex|default:"男"}</td>  
  4. </tr>  
<tr>
    <td>性别</td>
    <td>${sex|default:"男"}</td>
   </tr>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值