自定义模版渲染DOM{{keyword}}使用方法 

 1      //目标DOM节点
 2      var renderTarget=document.getElementById('ul1');
 3 
 4      //渲染模版
 5      var tpl= '<li data-elem="item" data-title="{{subTitle}}" data-vid="{{videoId}}" data-tvid="{{tvId}}" data-albumid="{{albumId}}" j-delegate="videoPlayList">\
 6                  <a href="{{videoUrl}}" title="{{subTitle}}" data-elem="itemlink">\
 7                      <img src="{{videoImage}}" alt="{{keyWord}}" />\
 8                      <strong>{{videoName}}</strong>\
 9                      <p>{{videoDescription}}</p>\
10                  </a>\
11                 </li>';
12 
13       //数据
14       var data_info=zhuantiInfo[1];
15 
16       //render函数
17       function render_tmpl(traget,tpl,data,matchImageName,targetSize){
18               var data_size=data.length;
19               console.log(data_size);
20               var traget=traget;
21               var tpl=tpl;
22               var html=[];
23               var longStr='';
24               if(matchImageName){
25                   var targetSize=targetSize;
26               }else{
27                   var targetSize='';
28               }
29               for(var i=0;i<data_size;i++){
30                   var dataStr=tpl.replace(/\{\{([\d\w]+)\}\}/g, function (matchStr,matchkey){
31                       console.log(matchImageName)
32                       if(matchkey==matchImageName){
33                           return data[i][matchkey]!=undefined ?data[i][matchkey].toString().replace(/.jpg/,targetSize):matchStr;
34                       }else{
35                           return data[i][matchkey]!=undefined ? data[i][matchkey].toString():matchStr;
36                       }
37                 });
38 
39                 html.push(dataStr);
40               }
41               longStr=html.join('');
42               traget.innerHTML=longStr;
43       }
44       render_tmpl(renderTarget,tpl,data_info,'videoImage','_160_90.jpg');

 

posted @ 2015-04-28 18:12  ollie_sk8  阅读(398)  评论(0)    收藏  举报