Template7插入动态模板

denghuan1938

墨衍会员 · AI 创作全网分发码龄10年

关注

转载最新推荐文章于 2026-08-14 08:08:43 发布 285 阅读 AI 写同款· GEO 优化 ›

要完成的效果如下图

其中下面添加出来的订单号和订单总价可以看作是接口请求的数据

实现步骤：

1 下载template7:https://github.com/nolimits4web/template7/，下载后将dist目录下的template7.js拖入工程，如下图

其中启动页是index.html，样式布局页面在index.css，jquery是用来方便dom操作。

部分代码讲解：

重点部分在于index.js，它的代码也很简单如下

var jsonData = {
    orderId: 100012345,
    orderPrice: 1000.00
}

// 点击添加订单按钮
function addOrder() {
    // 获取html模板
    var template = $('#template').html();
    // 编译模板
    var compiledTemplate = Template7.compile(template);
    // 给模板设置数据
    var html = compiledTemplate(jsonData);
    // 将模板拼接到指定处
    $(".content .order_list").last().append(html);
}

// 点击删除订单按钮
$(document).on("click", ".content .order_list .order_item .delete_order", function () {
    $(this).parent().parent().remove();
});

jsonData为测试数据，也可以看作是后台接口返回的数据。在html代码中已经将jsonData对应字段插入对应标签中。

demo下载地址：
https://github.com/LiJinShi/html_template7
template7使用教程：
http://idangero.us/template7/#.WgPLEa2757M