<!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

         <title>Document</title>

         <link rel="stylesheet" href="./css/style.css">

         <link rel="stylesheet" href="./css/xu.css" />

         <script src="./js/rem.js"></script>

         <script src="./js/jquery-1.7.2.min.js"></script>

         <script src="js/template.js"></script>

         <script src="./js/xu.js"></script>

         <style>

             html,

             body {

                 background-color: #f3f5f7;

                 margin:0 auto;

                 padding:0;

             }

         </style>

     </head>

     <body>

         <ul class="xu1"><li class="xu">创建者徐文龙 点击我</li></ul>

         <br />

         <div class="xu2"></div>

     </body>

 </html>

 <script type="text/html" id="couponTitle">

     {{each data as value i}}

     <ul class="divv">

     <li class="xu">我的名字是:{{value.username}}</li>

     <li class="xu">我的数学成绩是:{{value.math}}</li>

     <li class="xu">我的英语成绩是:{{value.english}}</li>

     <li class="xu">我的理综成绩是:{{value.summary}}</li>

     <li class="xu">我的语文成绩是:{{value.chinese}}</li>

         {{include 'scoreTemplate' value }}

     </ul>

     {{/each}}

 </script>

 <script id="scoreTemplate" type="text/html">

     <ul class="xuxu">

     {{each limian as value i}}

     <li>加分项 {{value.three}}</li>

     <li>分数{{value.these}}</li>

     {{/each}}

     </ul>

 </script>

这是html文件

 $(function() {

     $('.xu1').on('click', '.xu', function() {

         $.ajax({

             type: 'get',

             url: './xu.json',

             dataType: 'json',

             success: function(data) {

                 console.log(data);

                 var html = template('couponTitle', data);

                 $('.xu2').html(html);

             },

             error: function(data) {

                 console.dir(data);

                 $("#info").html("服务器发生错误");

             }

         });

     })

 })

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

 {

     "data": [

         {

             "username": "张三",

             "chinese": "138",

             "math": "120",

             "english": "80",

             "summary": "250",

             "limian": [

                 {

                     "three": "国家二级运动员",

                     "these": "40"

                 }, {

                     "three": "奥赛一等奖",

                     "these": "30"

                 }

             ]

         }, {

             "username": "李四",

             "chinese": "120",

             "math": "60",

             "english": "87",

             "summary": "120"

         }

     ]

 }

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

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

最终实现的效果如下

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

  1. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  2. Node学习之（第三章：art-template模板引擎的使用）

    前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的Jav ...

  3. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

  4. Express 中配置使用 art-template模板引擎

    art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...

  5. artTemplate模板引擎

    artTemplate模板引擎         <li>索引 {{i + 1}} :{{value}}</li>     {{/each}} </ul> </ ...

  6. 第115天：Ajax 中artTemplate模板引擎（一）

    一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...

  7. Art-Template模板引擎（原生写法与简洁写法）

    模板引擎:把js数据转换成html需要的页面,这就是模板引擎需要做的事     • native原生语法     1. 准备数据     2. 把数据转化成html格式的字符串 使用模板引擎 artT ...

  8. ajax配合art-template模板引擎的使用

    最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...

  9. art-template模板引擎高级使用

    一.结合express的基本使用 // npm下载express/art-template/express-art-tempalte,并且加载 var express=require('express ...

随机推荐

  1. FMDB 使用技巧

    源链接:  http://blog.csdn.net/iunion/article/details/7091744 - (BOOL) isTableOK:(NSString *)tableName{  ...

  2. ad广告下拉收起代码

    1. [代码][JavaScript]代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  3. hdu 4022 Bombing（map,multiset）

    题意:n个基地放在2维平面,然后m个炸弹人,每个炸弹人可以炸一行或者一列,输出每个炸弹人炸掉的基地个数. 思路:用map<int,multiset<int> >对应起来一行或者 ...

  4. MyBatis缓存设计

    和大多数ORM框架一样,为了尽可能减少数据库的访问,MyBatis设计支持缓存功能.设计上通过Cache接口提供SPI(服务提供接口),可以让第三方缓存提供具体的缓存实现,比如使用ehcache.Re ...

  5. MyBatis相关资源

    MyBatis很多项目中有用到,但会用并不表示你真正理解它,更不代表你能很清楚的教会别人.如果想在会用它的基础上更深入的通过学习它而提升自己技术能力,可利用下面资源. 1.官网文档,基本概念讲的很清楚 ...

  6. CSS counter计数器(content目录序号自动递增)详解

    一.CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的.于是,就有了,“计数器↔伪元素↔content属 ...

  7. JS两个数组比较，删除重复值巧妙方法

    //方法一 var arr1 = [1,2,3,4,5,6,7,8]; //数组A var arr2 = [1,2,3,11,12,13,14];//数组B var temp = []; //临时数组 ...

  8. caffe从入门到放弃

    断断续续折腾ML近一年,写点博客记录这个坑.

  9. 020--python函数基础知识考试(包括：函数_递归等知识）

    1.列举布尔值为 False 的值 空,None,0, False, '', [], {}, () 2.写函数: 根据范围获取其中 3 和 7 整除的所有数的和,并返回调用者:符合条件的数字个数以及符 ...

  10. 任务38：JWT 设计解析及定制

    任务38:JWT 设计解析及定制 改造jwt token token的值不放在Authorize里面,而是放在header的token里面 asp.net core的源代码 在Security的下面 ...