刚开始在写第一个动态网页的demo时，由于html不多，便使用字符串拼接的方法添加到dom来渲染，可是在后来写某外卖app时也需要如此添加，打开代码一看几千行，突然感觉累觉不爱
一行行的拼接有这功夫别人项目都上线了。于是在苦苦寻找之下，发现了可以使用js模板来渲染，还可以跟html文件相分离，终于等到你，还好我没放弃。
话不多说，进入正题吧
首先我们要引入一个js插件，这便是underscore.js，这个东西的功能很强大，当我发现时感觉被压在身下无法喘气。
然后我们可以创建一个函数，记住这个函数，等下他有大作为，因为这样我们便可以多次调用来插入模板。
function _gettpl(tplName, data){
return _.template($('#' + tplName).html())(data);
};
接下来便是生成模板吧，先看下面代码，这个就是完整版了，插入以后就长这个样子。
<ul id=“wife”> <li> <p>我是模板</p> </li> </ul>
我们需要在html页面中添加<script type="text/template" id="man"></script>，将html元素全部塞进去，那么便已经生成模板了
这里要注意的是，在标签里的内容，一般情况下<script>标签智能补全的内容是type="text/javascript" 我们需要将其替换成type="text/template"。以及在里面命名一个id为“man”
<script type="text/template" id="man">
<li>
<p>我是模板</p>
</li>
</script>
这样子就可以啦，心里是不是一万只草泥马奔腾而过？我拼死拼活拼接字符串，你两句就搞完了？不不不，大侠饶命，其实我们还没写完这个时候我们要在js文件中写下这么一句代码
$('#wife').html(_gettpl('man', {'data': data}));
这个时候就是真的完成了呢。你可能要问了，那Id=“wife“的孙子是谁，其实就是你模板插进去的父类啦”。
还不懂？那亲我一下就给你解释一遍
最后在总结一下流程：
1、静态页html构建完成后拿到数据
2、引入underscore.js（这个自己网上下载下来就可以了）
3、将需要数据替换的html放进script标签里（// <script type="text/template" id="xxx"> HTML模板 </script >）
4、在模板中的需要使用js的语法是以<% %>来包裹，例如循环
<% _.each( 需要遍历的数据,像data.xxx ,function（）{ %>
HTML代码
<% }) %>
开始用<% %>包住第一部分代码，分行后里面html内容不需要再用<% %>包裹，正常填写，最后结尾的js代码再以<% %>包住就可以了
5、第三步script中的id，就是插入父级的id，通常在父级也会有一个id，例如 <ul id="aa"></ul>
模板是<script type="text/template" id="bb">
<li>需要插入的数据</li>
</script >
接下来在js里面便是写 将id=“bb”的html插入到id=“aa”的容器中。
6、js通常会定义一个函数，比如
function _gettpl(tplName, data){
return _.template($('#' + tplName).html())(data);
}
函数接受2个参数，tplName是传入的id，也就是需要插入容器的内容，id=“bb”，data就是你的数据了，接下来就可以将内容插进容器了
$('#aa').html(_gettpl('bb', {'data':data}))
这样子他就插进去了
还想看？不了不了，营养跟不上，先到这里。
- 还没有人评论，欢迎说说您的想法！
客服
