标签:开发 false 引用 jquery error: type img replace angular
概要: 因为之前的项目是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 })
效果:
标签:开发 false 引用 jquery error: type img replace angular
原文地址:http://www.cnblogs.com/blog-index/p/6880086.html