当前位置: 首页 > 工具软件 > tpl.js > 使用案例 >

js模板jsTpl

汤飞翮
2023-12-01

由于前端工程越来越复杂,需要模板和数据的分离。
tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环境中使用。
官网地址

简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js模板</title>
    <script src="js/jsTpl.js"></script>
</head>
<body>
    <div class="result"> </div>
    <script>
        // 输出名字
        var tmp = ' your name is {{this.name}}';
        var ctx = {"name": "luck"};
        var jstpl = new JsTpl(tmp);
        document.querySelector('.result').innerHTML = jstpl.getCTpl().render(ctx);
            // 循环
    /*  var tmp = `<table border="1">
                                {{for (var i = 0,len = this.score.length; i < len; i++):}}
                                        <tr>
                                            <td>{{this.score[i]['name']}}</td>
                                            <td>{{this.score[i]['score']}}</td>
                                        </tr>
                                {{endfor;}}
                            </table>`;
        var ctx = {"score":[
                  {"name":"1", "score": "90"},
                                {"name":"2", "score": "91"},
                                {"name":"3", "score": "92"}
              ]};
        var jstpl = new JsTpl(tmp);
        document.querySelector('.result').innerHTML = jstpl.getCTpl().render(ctx);
*/
    </script>
</body>
</html>
 类似资料: