先簡單的做了一個,結合TrimPath提供的<a href=http://trimpath.com/project/wiki/JavaScriptTemplates target="_blank">JavascriptTemplate</a>實現,目前的解決方案比較丑陋,通過xmlHttpRequest從服務器端獲取模板文件,然后交由JavascriptTemplate結合數據解析形成最后的html,示例如下:
<
html
>
<
head
>
????
<
script?
src
="js/prototype.js"
></
script
>
????
<
script?
src
="js/template.js"
></
script
>
????
<
script?
src
="js/jstemplate.js"
></
script
>
</
head
>
<
body
>
????
<
span?
id
="jmResult"
></
span
>
<
script
>
????
var
?tdata
=
{User:
{username:
"
jerry
"
}
}
;
????JsTemplate.render("
http://localhost:8080/RIAWork/test.jm
"
,tdata,
"
jmResult
");
</
script
>
</
body
>
</
html
>
模板文件如下:
Hello?world,<font?color=red>${User.username}</font>從引用的js可以看出這個解決方案依賴于prototype.js、template.js以及jstemplate.js,其中prototype.js不用說,大名鼎鼎,template.js就是TrimPath提供的JavascriptTemplate,jstemplate.js則是由RIAWork提供的。
jstemplate.js源碼如下:
var?JSTEMPLATE_ELE_ID="__JSTEMPLATE_HIDDEN__";

var?JsTemplate=Class.create();


JsTemplate.prototype=
{


????initialize:function()
{
????????;
????}

}


JsTemplate.renderTemplateText=function(request,data,containerId)
{
????

????function?getEle()
{
????????var?templateHiddenEle=$(JSTEMPLATE_ELE_ID);

????????if(templateHiddenEle==null)
{
????????????templateHiddenEle=document.createElement("span");
????????????templateHiddenEle.id=JSTEMPLATE_ELE_ID;
????????????templateHiddenEle.style.display="none";
????????????document.body.insertBefore(templateHiddenEle);
????????}
????????return?templateHiddenEle;
????}
????
????var?templateText=request.responseText;
????getEle().innerText=templateText;
????var?templateObj=TrimPath.parseDOMTemplate(JSTEMPLATE_ELE_ID);
????var?result=templateObj.process(data);
????document.body.removeChild(getEle());
????$(containerId).innerHTML=result;
}


JsTemplate.render=function(templateUrl,data,containerId)
{

????var?templateAjax=new?Ajax.Request(templateUrl,
{method:'get',asynchronous:'true',onComplete:function?callback(request)
{JsTemplate.renderTemplateText(request,data,containerId)}});
}這個方案不好的地方就是在獲取到服務器返回的數據之后,將數據結合模板進行渲染的時候還需要再連接到服務器獲取模板文件,盡管最后的渲染是在前端通過JavascriptTemplate做的。