模拟模板替换功能--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];
                       });

将字段替换为内容

  getHostList:function(){
            var request={}
            request.page_type='get_hot_question_list';
            request.page_num='0';
            $.ajax({
                url: Fields.url+'question',
                data: request,
                dataType: "json",
                type: 'post',
                async: false,
                success: function (result) {   //成功后回调
                    if(result.ret==0){
                        var data=result.info;
                        //列表数据
                        var reg = new RegExp("{{(.+?)}}","igm");        //匹配 {{}} 的内容
                        var tempLi = $("#row").html();
                        var html='';
                        for(var i=0;i<data.all_num-1;i++) {
                            if(!data.info[i])break;
                            html+= tempLi.replace(reg, function (node, key) {
                                return data.info[i][key];
                            });
                        }
                        $("#qa_hot_list").html(html);
                    }else{
                        Func.popShow('#pop');
                        $('#pop .jx_inf').text(result.info)
                    }
                },
                error: function(e){    //失败后回调

                }
            })

效果：