<!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. React 编码

    https://github.com/Minwe/style-guide/blob/master/React.js.md https://github.com/planningcenter/react ...

  2. UIFont 字体样式 [UIFont fontWithName~];

    设置字体样式代码:[UIFont fontWithName:@"Arial-BoldMT" size:15] 下边一一列举: 一:Font Family: American Typ ...

  3. 聊聊Spring的核心组件

    Spring的核心是IOC容器,它本质上是一个bean关系集合.而要实现它也是有beans,context,core三个模块完成的. beans包主要是负责bean的定义,创建和解析工作,里面用到了简 ...

  4. 关于tensorflow中维度的问题

    一直对TF中tensor的reduce操作涉及的axis(reduction_indices)计算一知半解,这里系统总结一下,避免继续走弯路: 1.本质上来说,reduce_xxx都是降维操作,沿某个 ...

  5. Java泛型简明教程

    泛型是Java SE 5.0中引入的一项特征,自从这项语言特征出现多年来,我相信,几乎所有的Java程序员不仅听说过,而且使用过它.关于Java泛型的教程,免费的,不免费的,有很多.我遇到的最好的教材 ...

  6. kali的更新源

    先安装的系统最好更新更新 apt-get update apt-get upgrade 因为默认会去国外的网站去下载....慢 为了速度 可以修改更新源 vim /etc/apt/sources.li ...

  7. PhpStorm之服务器篇

    打开编辑器,依次点击 Tools->Deloyment->Configuration,进入连接服务器的配置页面 2.点击左上角的 + ,配置一个新的服务器 3.填写添加之后服务器的名称,并 ...

  8. poj1564

    dfs判重 #include<stdio.h> #include<iostream> #include<cstdio> #include<queue> ...

  9. Java中JRE、JDK和JVM的区别

    一.三者的基本概念: JRE(Java Development Kit):Java的运行环境: JDK(Java Runtime Enviroment):Java开发工具包: JVM(Java Vir ...

  10. js封装xhr【重复造轮子】

    仿jquery ajax,不过功能没那么多.贴代码 --------------------------------------分割线--------------------------------- ...