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做的。

posted on 2006-05-16 17:09 BlueDavy 阅读(1886) 评论(0)  编辑  收藏 所属分类: @RIAWork


只有注册用户登录后才能发表评论。


网站导航:
 

公告

 









feedsky
抓虾
google reader
鲜果

导航

<2006年5月>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

统计

随笔分类

随笔档案

文章档案

Blogger's

搜索

最新评论

阅读排行榜

评论排行榜