初识laytpl

laytpl-精致巧妙的JavaScript模板引擎

这两天在做一个mui项目，列表需要循环很多的数据。在公司同事的指引下认识了这个新的模板--laytpl。我只想说，很好用们很巧妙。

废话不多说，直接看如何使用。

首先，我们需要下载laytpl.js文件 官网http://www.layui.com/laytpl/

然后我们创建一个data.js文件用来存储数据

里面的内容我是随便创建几条假数据。

var data = {
    title: "We Are Young!",
    author: '王小宾',
    time:"2017.7.28 19：56",
    list: [{name: "齐天大圣", address: "花果山", description: "齐天大圣孙悟空，七十二变火眼金睛"},
             {name: "猪八戒", address: "高老庄", description: "天蓬元帅猪八戒，三十六般变化"},
             {name: "沙和尚", address: "流沙河", description: "卷帘大将沙和尚，只因打碎琉璃盏，被贬下凡间"}
    ],
    foot:'Nothing is Impossible!!'
}

最后创建test.html来书写我们的内容，文件如下：

首先，在test.html里面引入两个js文件

然后我们现在test.html文档里面书写我们的格式内容，把样式随便写一下。其实工作中也是一般先把静态文件写好

<div id="view">
            <h3>We Are Young!</h3>
        <p><span>author：王小宾</span><span>time：2017.7.28</span></p>
        <table>
            <tr>
                <th>姓名</th>
                <th>住址</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>孙悟空</td>
                <td>花果山</td>
                <td>齐天大圣火眼金睛</td>
            </tr>
            <tr>
                <td>猪八戒</td>
                <td>高老庄</td>
                <td>天蓬元帅猪八戒，三十六般变化</td>
            </tr>
            <tr>
                <td>沙和尚</td>
                <td>流沙河</td>
                <td>卷帘大将沙和尚，只因打碎琉璃盏，被贬下凡间</td>
            </tr>
        </table>
　　　　　　 <h2>Nothing is Impossible</h2>
        </div>

编写相关css样式，至少不那么难看

        #view {
            background-color: #555;
            width: 500px;
            height: 400px;
            margin: 0 auto;
            text-align: center;
            padding: 20px 20px;
        }

        #view p span {
            margin-right: 20px;
        }

        #view table {
            border: 1px solid #333;
            width: 100%;
        }

        #view table tr th {
            height: 50px;
            background-color: #333;
        }

        #view table tr td {
            background-color: #333;
            height: 30px;
        }

在页面显示结果就是

准备工作已经完成，下面就开始真正的东西了。到这一步，之前id 为view的内容就可以删除不要了。

首先，我们写一个script标签，注意type一定要是  type="text/html"

        <script src="test.js" type="text/html" id="dom">
        <h3>{{d.title}}</h3>
        <p><span>author：{{d.author}}</span><span>time：{{d.time}}</span></p>
        <table>
            <tr>
                <th>姓名</th>
                <th>住址</th>
                <th>描述</th>
            </tr>
              {{# for(var i = 0; i < d.list.length; i++){  }}
            <tr>
                <td>{{d.list[i].name}}</td>
                <td>{{d.list[i].address}}</td>
                <td>{{d.list[i].description}}</td>
            </tr>
            {{# } }}
        </table>
　　　　　　<h2>{{d.foot}}</h2>
        </script>

而因为我们用之前在test.html里面有写好的内容，所以可以直接拿过来做改变就行了。这样我们既知道样式如何也很方便。一定要注意，laytpl数据开始都是d,

d就表示我们拿到的数据名称

我们循环的内容其实就是tr，td里面的内容，所以我们在第二个tr外面加上循环。

最后，我们在一个script标签里面写相关的js文件。很简单，就是把上面的内容拿过来显示在我们的view里面

<script type="text/javascript">
            var getDom = document.getElementById("dom").innerHTML;
            laytpl(getDom).render(data, function(html) {
                document.getElementById("view").innerHTML = html;
            })
        </script>

最后刷新页面显示的结果就是

这是最基础也是最简单的内容了。掌握好继续加油！！