模拟模板替换功能--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的主要内容,如果未能解决你的问题,请参考以下文章

vscode代码片段生成vue模板

关于js----------------分享前端开发常用代码片段

sublime代码片段功能

mock.js的运用

创建自己的代码片段(CodeSnippet)

Shell外壳的简易模拟