<!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. Android 5.x SEAndroid/SElinux内核节点的读写权限【学习笔记】

    本文转载自:http://blog.csdn.net/tung214/article/details/44461985 Android 5.0下,因为采取了SEAndroid/SElinux的安全机制 ...

  2. C#在一段数字区间内随机生成若干个互不相同的随机数

    /// <summary>        /// Random ra=new Random();  系统自动选取当前时前作随机种子:        /// Random ra=new Ra ...

  3. 探索Oracle11gR2 之 DataGuard 三种保护模式

    Oracle的DataGuard技术有三种实现模式,分别是max performance.max availability.maxprotection这三种模式. 以下是来自Oracle文档的摘要信息 ...

  4. python中的异常处理try/except/finally/raise

    异常发生在程序执行的过程中,如果python无法正常处理程序就会发生异常,导致整个程序终止执行,python中使用try/except语句可以捕获异常. try/except 异常的种类有很多,在不确 ...

  5. javacv开发详解之1：调用本机摄像头视频（建议使用javaCV最新版本）

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  6. c++中static的全部用法

    要理解static,就必须要先理解另一个与之相对的关键字,很多人可能都还不知道有这个关键字,那就是auto,其实我们通常声明的不用static修饰的变量,都是auto的,因为它是默认的,就象short ...

  7. Appium+python自动化

    名称 链接地址 Appium+python自动化8-Appium Python API(上) http://mp.weixin.qq.com/s/WvpT5oRrYY22avI95FuypQ Appi ...

  8. CreateThread创建线程 互斥量锁

    HANDLE CreateThread( LPSECURITY_ATTRIBUTES lpThreadAttributes,//SD:线程安全相关的属性,常置为NULL SIZE_T dwStackS ...

  9. B. Arpa’s obvious problem and Mehrdad’s terrible solution

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  10. J20170507-ts

    プロンプト n. 提示 オブジェクト n. 对象 アスタリスク *  アンパサンド      & スラッシュ       / イテレータ    n 迭代器 差し詰め 当前 スペル spell ...