template.js简单使用例子

最新推荐文章于 2021-06-21 17:46:51 发布

原创最新推荐文章于 2021-06-21 17:46:51 发布 · 741 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js templatejs

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的模板引擎使用案例，展示了如何通过JavaScript实现动态内容填充。通过对预定义的HTML模板进行数据绑定，实现了列表项的自动生成。此方法适用于快速展示不同类别的内容。

/**
 * template.js简单使用例子，方法比较笨，不知道还有什么高级使用方法
 */
function contentTpl(){
    var html = ' '+
        '<script id="contentTpl" type="text/html">' +
            '<ul>' +
            '<%for(var i = 0; i < list.type.length; i++) {%>' +
                '<li><%=list.type[i]%></li>' +
            '<%}%>' +
            '</ul>' +
        '</script>'+
        '';
    $("body").append(html);
    var data = {
        type: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    render("contentTpl","content",data);
}

function render(tpl_id,div_id,data){
    var tpl = document.getElementById(tpl_id).innerHTML;
    var html = template(tpl, {list: data});
    document.getElementById(div_id).innerHTML = html;
}