Underscore模板的使用

一、开篇

　　下载underscode.js
二、使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="underscore.js"></script>

    <script src="jq.js"></script>

    <title>Document</title>

</head>

<body>

        <ul id="element"></ul>

        <!-- 定义模板，将模板内容放到一个script标签中 -->

        <script type="text/template" id="tpl">

            <% for(var i = 0; i < data.list.length; i++) { %>

                <% var item = list[i] %>

                <li>

                    <span><%=item.firstName%> <%=item.lastName%></span>

                    <span><%-item.city%></span>

                </li>

            <% } %>

        </script>

</body>

</html>

<script>

    // 获取渲染元素和模板内容

    var element = $('#element'),

            tpl = $('#tpl').html();    

        // 创建数据, 这些数据可能是你从服务器获取的

        var data = {

            list: [

                {firstName: 'dirk', lastName: 'San', city: 'Shanghai'},

                {firstName: 'Li', lastName: 'Si', city: 'sz'},

                {firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},

                {firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}

            ]

        }    

      // 解析模板, 返回解析后的内容

       var render = _.template(tpl);

       var html = render(data);

      // 将解析后的内容填充到渲染元素

       element.html(html);

</script>
巴特西

Underscore模板的使用

一、开篇

二、使用

三、效果

最新文章

热门文章
