使用JST模板引擎加快页面交互内容开发

首先看一个需求：

 

页面上存在一个select box，当选择了下拉框中的一个选项的时候，异步请求获取数据并在页面某个区域显示出来。而且这个显示区域是具有样式和自己固有的js等内容的，并非简单的静态文字。

如果用传统的js方式，我们该如何去实现呢？

function dwrCallback(list){ var resultStr = ... 依次遍历列表，组装html代码和数据，封装成一个大字符串，然后通过下面的innerHTML来设置进去 Document.getElementById("id").innerHTML = resultStr; }  

这样固然可以解决问题，但是当这个需要展示的DIV非常大的时候，在使用上面的方法，将会是一件非常不可思议的事情。所以势必需要我们去尝试它的更为便捷而且高效不容易出错的方式来解决。

 

这里我们采用Javascript Template jsf模板引擎来完成这个工作。

官方网址：http://trimpath.com/project/wiki/JavaScriptTemplates

 

这是基于js的非常轻量级的跨浏览器框架，可以帮助你完成EL风格的渲染，并返回结果字符串，然后可以通过innerHTML等方式插入到某个隐藏的div中。作为一种ajax风格的交互。

 

看看怎么来使用 step by step :

 

1、 跟jquery相似的，需要首先去下载相关的js库 template.js

下载文件并且在页面底部包含进去：

<mce:script language="javascript" src="trimpath/template.js" mce_src="trimpath/template.js"></mce:script> 

 

2、在你需要使用的页面埋上一段HTML代码，这段代码即是将用来渲染并展示的内容，通常而言，可以使用一个隐藏的textarea来保存是一个很好的实践：

<#noparse> <textarea id="cityTopTen" style="display:none" mce_style="display:none"> <div > <ol class="w-lst3 f-cb"> {for groupInfo in cityTopTenList} {if groupInfo_index%2==0} <li class="odd"> {else} <li> {/if} <span class="num">${Number(groupInfo_index)+1}、</span><span><a class="s-fc2" href="worldcup.do?action=groupdetail&groupId=${groupInfo.id}" mce_href="worldcup.do?action=groupdetail&groupId=${groupInfo.id}">${groupInfo.groupName}</a></span><span class="other">${groupInfo.point}分</span> </li> {/for} </ol> </div>  

注意的是，这里我们使用了freemarker框架，所以页面需要用noparse包含起来以阻止freemarker将其解析掉。这段代码只是一个模板，所以采用何种方式来保存将取决于个人习惯，这里我们使用的是一个隐藏的textarea

可以看到，jst的风格跟freemarker或者velocity很相似，都是EL风格，他提供了一些便捷的逻辑操作关键字，如很常用的for和if等，具体的语法我们稍后再讲，这里只是编写页面展示逻辑，像使用freemarker一样简单。

 

3、当我们的callback函数执行完异步请求返回结果list之后，我们可以采用如下的方式来渲染模板并展示在页面上

function showTopTenInCity(cityData) { var cityTopTenList={"cityTopTenList":cityData}; $("showCity").innerHTML = TrimPath.parseTemplate($("cityTopTen").value).process(cityTopTenList); } 

 

这样就完成了一个渲染并展示的过程，相对于之前的使用字符串拼装的方式，非常便捷，而且不像拼装过程那样很容易出错让人痛苦。

关于jst的语法，可以简单的总结一下：

 

// 以下代码部分为转帖内容，文字部分个人添加

 

1、表达式

可以使任何字符串，但是由于我们使用大括号来包装，所以势必名称中在使用大括号{}

 

 

${expr} ${expr|modifier} ${expr|modifier1|modifier2|...|modifierN} ${expr|modifier1:argExpr1_1} ${expr|modifier1:argExpr1_1,argExpr1_2,...,argExpr1_N} ${expr|modifier1:argExpr1_1,argExpr1_2|...|modifierN:argExprN_1,argExprN_2,...,argExprN_M} 

${customer.firstName} ${customer.firstName|capitalize} ${customer.firstName|default:"no name"|capitalize} ${article.getCreationDate()|default:new Date()|toCalenderControl:"YYYY.MM.DD",true,"Creation Date"} ${(lastQuarter.calcRevenue() - fixedCosts) / 1000000} 

可以使用 % 来包含表达式，这样就可以防止当变量名称出现大括号导致的错误情况

Visit our ${% emitLink('Solutions and Products', { color: 'red', blink: false }) %} page. The extra spaces are actually not necessary, like... ${%customer.firstName%} ${%customer.firstName|capitalize%} 

IF语句的使用

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

{if customer != null && customer.balance > 1000} We love you! {/if} {if user.karma > 100} Welcome to the Black Sun. {elseif user.isHero} Sir, yes sir! Welcome! {if user.lastName == "Yen"} Fancy some apple pie, sir? {/if} {/if} <a href="/login{if returnURL != null && returnURL != 'main'}?goto=${returnURL}{/if}" mce_href="login{if returnURL != null && returnURL != 'main'}?goto=${returnURL}{/if}">Login</a> 

使用defined库函数判断变量是否已经被定义过

{if defined('adminMessage')} System Administrator Important NOTICE: ${adminMessage} {/if} 

FOR循环

{for varName in listExpr} {/for} {for varName in listExpr} ...main body of the loop... {forelse} ...body when listExpr is null or listExpr.length is 0... {/for} 

变量定义

{var temp = crypto.generateRandomPrime(4096)} Your prime is ${temp}. 

宏定义

{macro htmlList(list, optionalListType)} {var listType = optionalListType != null ? optionalListType : "ul"} <${listType}> {for item in list} <li>${item}</li> {/for} </${listType}> {/macro} Using the macro... ${htmlList([ 1, 2, 3])} ${htmlList([ "Purple State", "Blue State", "Red State" ], "ol")} {var saved = htmlList([ 100, 200, 300 ])} ${saved} and ${saved} 

CDATA 文本区段，内容将不渲染，原样输出

{cdata} ...text emitted without JST processing... {/cdata} 

 

编写内部的JS代码，使用eval标签

 

<select οnchange="sel_onchange()"> <option value="1">1</option> <option value="2">2</option> </select> {eval} sel_onchange = function() { alert('hello'); } {/eval} 

 

其他的语法请参见相关的文档，总而言之，jst是一个非常有用的渲染引擎，可以帮助我们省掉很多的前端工作，提高工作效率，减少出错几率。通过dwr和jst的配合使用，可以营造很好的用户体验，如果再具有一个不错的页面美工，那将是一件非常惬意的事情！