<!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. 详解likely和unlikely函数【转】

    本文转载自:http://blog.csdn.net/npy_lp/article/details/7175517 内核源码:Linux-2.6.38.8.tar.bz2 参考文档:http://gc ...

  2. 一步一步学Silverlight 2系列（24）：与浏览器交互相关辅助方法

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. oracle：rman恢复----通过时间set until time

    试验计划:先做一个0级备份,再创建一个表,插入几条数据,最后删除表,然后通过rman把该表的数据恢复. 试验环境:在归档模式,oracle10.2.0.1 开始试验: 1.rman level 0备份 ...

  4. apt-get update 问题 及gcc高亮

    一 gcc高亮 gcc 高亮有好几种方法. 参考 http://www.cokco.cn/thread-39909-1-1.html 这个教程: (1) git clone https://githu ...

  5. luogu 4782【模板】 2-SAT 问题

    2-SAT就是给出$m$个限制表示$x==val_x || y==val_y$ 求出满足的解 每个点拆成两个点,如果$x$不满足则$y$一定满足,$y$不满足同理.这样我们连边,然后$tarjan$即 ...

  6. asp.net core zipkin

    微服务监控zipkin+asp.net core 0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 监控目录:微服务监控zipkin.skywalking以及日志ELK监控系列 一 ...

  7. BZOJ_4383_[POI2015]Pustynia_线段树优化建图+拓扑排序

    BZOJ_4383_[POI2015]Pustynia_线段树优化建图+拓扑排序 Description 给定一个长度为n的正整数序列a,每个数都在1到10^9范围内,告诉你其中s个数,并给出m条信息 ...

  8. 【2017省中集训DAY1T1】 小X的质数

    [题目链接] 点击打开链接 [算法] 如果一个数是小X喜欢的数,那么有两种可能: 1.这个数是质数 2.这个数除以它的最小质因子是一个质数 所以我们可以用线性筛+前缀和的方式预处理,询问的时候O(1) ...

  9. bzoj1304

    树形dp 题目是要求最深的颜色 先开始觉得设dp[i][0/1/2]表示这个点的状态,然后发现没办法保证该点是最深的点,且dp状态没有实际意义,其实dp[i][0/1]表示当前i的子树颜色为c^1的叶 ...

  10. HDU 5901 Count primes (模板题)

    题意:给求 1 - n 区间内的素数个数,n <= 1e11. 析:模板题. 代码如下: #pragma comment(linker, "/STACK:1024000000,1024 ...