arttemplate模板引擎有假数据返回数据多层内嵌的渲染方法-白红宇

arttemplate模板引擎有假数据返回数据多层内嵌的渲染方法

阅读量：4515 次

发布时间：2019-06-08

本文共 1794 字，大约阅读时间需要 5 分钟。

1  2  3  4      5         
      6         
      7         Document 8         
      9         
     10         11         12         13         14         22     23 24     25         
     
      创建者徐文龙 点击我
     
26         
27         
     
    28     29 30 31 43

这是html文件

1 $(function() { 2     $('.xu1').on('click', '.xu', function() { 3         $.ajax({ 4             type: 'get', 5             url: './xu.json',     6             dataType: 'json', 7              8             success: function(data) { 9                 console.log(data);10                 var html = template('couponTitle', data);11                 $('.xu2').html(html);12             },13             error: function(data) {14                 console.dir(data);15                 $("#info").html("服务器发生错误");16             }17         });18     })19 })

这是js文件包含ajax的请求和arttamplate的模板的使用

1 { 2     "data": [ 3         { 4             "username": "张三", 5             "chinese": "138", 6             "math": "120", 7             "english": "80", 8             "summary": "250", 9             "limian": [10                 {11                     "three": "国家二级运动员",12                     "these": "40"13                 }, {14                     "three": "奥赛一等奖",15                     "these": "30"16                 }17             ]18         }, {19             "username": "李四",20             "chinese": "120",21             "math": "60",22             "english": "87",23             "summary": "120"24         }25     ]26 }

上面的是json数据我制作的假数据可以实现返回数据目前在hbuilder里面可以直接使用但是有些编辑器里面不能直接使用 ,hbuilder有后台服务器一部分功能,在hbuilder里面可以直接打开. 直接用浏览器不能实现效果. 除非需要配置服务器.

核心的代码在于 {

{include 'scoreTemplate' value }} 记住一定是value 不是data.value 不然就无法实现效果. scoreTemplate是另一个模板的id 一定要一致.

最终实现的效果如下

转载于:https://www.cnblogs.com/LFxanla/p/7074661.html

你可能感兴趣的文章