模板使用的一个坑

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