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 閱讀(2028) 評論(0)  編輯  收藏 所屬分類: @RIAWork

          公告

           









          feedsky
          抓蝦
          google reader
          鮮果

          導航

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

          統計

          隨筆分類

          隨筆檔案

          文章檔案

          Blogger's

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 张家港市| 罗山县| 屏山县| 奉贤区| 景谷| 剑川县| 大渡口区| 漳浦县| 荔波县| 怀安县| 南丰县| 宝兴县| 麻阳| 孝义市| 高唐县| 云梦县| 安徽省| 吉水县| 平阳县| 泰和县| 嘉善县| 博客| 财经| 通渭县| 哈密市| 湄潭县| 慈利县| 黑山县| 阿城市| 永年县| 天等县| 调兵山市| 手游| 瑞昌市| 天台县| 镇平县| 奇台县| 高雄县| 西丰县| 阜阳市| 青川县|