JS数据模板分离（告别字符串拼接）-template

刚开始在写第一个动态网页的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}))

这样子他就插进去了

还想看？不了不了，营养跟不上，先到这里。