模板使用的一个坑

html模板相信很多人都用过，类似angular中的指令，通过模板对于html中很多相似的片段完全可以借助for循环或者ng-repeat指令来生成，大大提高效率。

最近在使用模板时候碰到一个坑，分享出来，希望对后来者有所帮助。

重构之前的代码：

<script type="text/javascript" src="../js/spaceBlogs.js" async></script>

<div id="spaceBlogsId" class="box" include="./tpl/spaceBlogsTpl.html"></div>

　　

var drawTemplate = function(DomId){
    var Dom =  $("div[id="+DomId+"]");
    if(!Dom){
        alert("Dom不存在");
    }
    else{
        $.ajax({
            url : $(Dom).attr("include"),
            success : function(res){
                if (!$(Dom).attr("data")) {
                    var text = _.template(res);
                }
                else {
                    var text = _.template(res)($_scope[$(Dom).attr("data")]);
                }
                $(Dom).html(text);
            },
            error : function(res){
                console.log(DomId + "模板绘制失败");
            }
        })
    }
};

drawTemplate("spaceBlogsId")

　　但是这样写会导致一个问题，很多时候其实模板还没有渲染，对模板的dom添加事件的一些js已经运行了，导致事件没有添加上去。废了好大事都没有优化好，最后读了阮大神的一片博文才豁然开朗，于是有了下面的重写：

  <div id="spaceBlogsId" class="box" include="./tpl/spaceBlogsTpl.html"></div>

　　

var newFun = function(){
    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= '../libs/rl_exp.js';
    head.appendChild(script);
    head= document.getElementsByTagName('head')[0];
    script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= '../js/uploadFile.js';
    head.appendChild(script);
    setTimeout(function(){
        changeTagFun($("#blogTags").find("a")[2]);
    },100);
};



//绘制模板方法
var drawTemplate = function(DomId,successCallBack){
    var Dom =  $("div[id="+DomId+"]");
    if(!Dom){
        alert("Dom不存在");
    }
    else{
        $.ajax({
            url : $(Dom).attr("include"),
            success : function(res){
                if (!$(Dom).attr("data")) {
                    var text = _.template(res);
                }
                else {
                    var text = _.template(res)($_scope[$(Dom).attr("data")]);
                }
                $(Dom).html(text);
                if(successCallBack){
                    successCallBack();
                }
            },
            error : function(res){
                console.log(DomId + "模板绘制失败");
            }
        })
    }
};


drawTemplate("spaceBlogsId",newFun);

　

原文连接：http://javascript.ruanyifeng.com/bom/engine.html#toc5