模拟模板替换功能--js
Posted 黑白kn
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模拟模板替换功能--js相关的知识,希望对你有一定的参考价值。
概要: 因为之前的项目是angular开发(vue和react也是一样),对其中的双向数据绑定的使用感觉很方便,然后就思考怎么使用到jquery框架中来,适用于 列表生成
知识点: 正则与其反向引用,str.replace
html部分
<!--列表li 模板--> <script type="text/html" id="row"> <li> <h6 class="qa_title"><a href="qa_article.shtml?qid={{qid}}">{{title}}</a></h6> <div class="qa_info c"> <span><i class="icon icon_visit"></i>浏览:{{view_num}}</span> <span><i class="icon icon_commt"></i>回答:{{comoment_num}}</span> <span class="fr"><i class="icon icon_date"></i>提问时间:{{add_time}}</span> </div> </li> </script>
js部分,使用"\\{\\{(.+?)\\}\\}","igm",正则找到 $(\'#row\') 下面的 {{}}包含的字段,
tempLi.replace(reg, function (node, key) { return data.info[i][key]; });
将字段替换为内容
1 getHostList:function(){ 2 var request={} 3 request.page_type=\'get_hot_question_list\'; 4 request.page_num=\'0\'; 5 $.ajax({ 6 url: Fields.url+\'question\', 7 data: request, 8 dataType: "json", 9 type: \'post\', 10 async: false, 11 success: function (result) { //成功后回调 12 if(result.ret==0){ 13 var data=result.info; 14 //列表数据 15 var reg = new RegExp("\\{\\{(.+?)\\}\\}","igm"); //匹配 {{}} 的内容 16 var tempLi = $("#row").html(); 17 var html=\'\'; 18 for(var i=0;i<data.all_num-1;i++) { 19 if(!data.info[i])break; 20 html+= tempLi.replace(reg, function (node, key) { 21 return data.info[i][key]; 22 }); 23 } 24 $("#qa_hot_list").html(html); 25 }else{ 26 Func.popShow(\'#pop\'); 27 $(\'#pop .jx_inf\').text(result.info) 28 } 29 }, 30 error: function(e){ //失败后回调 31 32 } 33 })
效果:
以上是关于模拟模板替换功能--js的主要内容,如果未能解决你的问题,请参考以下文章