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

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 韩城市| 双江| 开阳县| 图们市| 陆河县| 台山市| 油尖旺区| 阜新市| 新化县| 南郑县| 建瓯市| 六盘水市| 文化| 海林市| 营口市| 上虞市| 湖口县| 漳平市| 崇义县| 杨浦区| 乌审旗| 体育| 西宁市| 合山市| 沅江市| 璧山县| 冕宁县| 定远县| 武山县| 乌苏市| 永顺县| 武宁县| 苗栗县| 高要市| 牡丹江市| 措勤县| 司法| 龙南县| 康定县| 冕宁县| 宣汉县|