Template7插入动态模板

要完成的效果如下图

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

实现步骤：

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_template7template7使用教程：
http://idangero.us/template7/#.WgPLEa2757M

巴特西

Template7插入动态模板

最新文章

热门文章