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

?

轉載于:https://www.cnblogs.com/xianZJ/p/4836974.html

總結

以上是生活随笔為你收集整理的模板使用的一个坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。