RIAWork进展之Velocity For Js

RIAWork进展之Velocity For Js

先简单的做了一个，结合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做的。