<!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. 启动vmware中的虚拟机的时候，提示Failed to lock the file

    http://www.vixual.net/blog/archives/842 VMware Server 當掉後重新啟動 Guest OS 時,出現 cannot open the disk '*. ...

  2. JQuery判断div(控件)是否为隐藏

    以下是JavaScript 中判断div是否为隐藏代码引用片段: if (div.style.display == "none") { div.style.display = &q ...

  3. 基于阿里云上实现全站https的正确姿势(一)

    对应的网址:https://yq.aliyun.com/articles/65199 摘要: 目前主流大厂的网站和服务都已经实现了全站https, 例如: baidu, taobao, jd等. 关于 ...

  4. NIO与IO的区别

    nio是new io的简称,从jdk1.4就被引入了.现在的jdk已经到了1.6了,可以说不是什么新东西了.但其中的一些思想值得我来研究.这两天,我研究了下其中的套接字部分,有一些心得,在此分享.  ...

  5. BZOJ_5311_贞鱼_决策单调性+带权二分

    BZOJ_5311_贞鱼_决策单调性+带权二分 Description 众所周知,贞鱼是一种高智商水生动物.不过他们到了陆地上智商会减半. 这不?他们遇到了大麻烦! n只贞鱼到陆地上乘车,现在有k辆汽 ...

  6. DP专辑之最长公共子序列及其变形

    vijos1111(裸的最长公共子序列) 链接:www.vijos.org/p/1111 题解:好久没有写最长公共子序列了,这题就当是复习了.求出最长公共子序列,然后用两个单词的总长度减去最长公共子序 ...

  7. 在线制作一键生成微信小程序实现原理之需求分析

    随着微信小程序接口不断的放开,小程序在今年或许是明年必将成为商家的一个标配,这个标配的标准就是要开发周期短,费用低,功能实用.只有这样才能让线下的广大商家快速接入.现在也有好多公司开发出了一键生成快速 ...

  8. ORA-01843: not a valid month 错误

    转自:https://blog.csdn.net/jetluning/article/details/48785599 insert into ......的场合发生ORA-01843: not a ...

  9. 014--python运算符和作业改进

    一.运算符 % 取模,返回商的余数 10/3     3.33333333335 10//3    3   地板除,取整数,不是四舍五入 a = 3  b = 5  ----->   a< ...

  10. RxJava入门之路（二）

    收集一下能够避免背压的运算符 sample(500, TimeUnit.MILLISECONDS)  定期收集数据,并发送最后一个 throttleFirst(500,TimeUnit.MILLISE ...