js模板jsTpl

由於前端工程越來越複雜,需要模板和數據的分離。
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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章