<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>
<title>Document</title>
<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.js'></script>
<script src="js/doT.min.js"></script>
<style>
/* {{ if(value.id==0){ }}
//
// {{ }else{ }}
//
// {{ } }} */
</style>
</head>

<body>
<div class="main" style="list-style: none;text-align: center; font-size: 30px;color: #000000;">
<script type="text/template" name_type="mode">
{{~it:value:index}}
<div>{{= value.title}}</div>
<div id="Student" style="color: brown;font-size: 2em;">
<div class="zhizhunbao">
<div>{{= value.name}}</div>
<div id="Student_name_type">
<div id="suniahui">
{{= value.name}}
</div>
</div>

</div>
</div>
<div id="Wonalizhidao_Stdent">
<div id="Student">
{{= value.title}}
</div>
</div>
{{~}}
</script>
</div>
</body>
<script type="text/javascript">
$(function () {
$.ajax({
url: "index.json",
type: "get",
dataType: "json",
contentType: "application/json;charset=UTF-8",
beforeSend: function (xhr) {},
success: function (response) {
console.log(response)
$('.main').append(doT.template($("[name_type='mode']").html())(response));
}
})
});
</script>

</html>

我们先用json模拟一条数据:

[{
"title": "觅客商城",
"name": "箭蚁科技",
"img":"img/9d82d158ccbf6c81924a92c5b13eb13533fa4099.jpg"
}

]

dot.js模板实现分离式的更多相关文章

  1. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  2. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  3. doT.js模板和pagination分页应用

    doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...

  4. doT js模板入门 2

    doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...

  5. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  6. doT.js 模板引擎的使用

    dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

  7. doT js模板入门 3

    for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...

  8. doT.js模板用法

    前提:引入doT.min.js: <script type="text/javascript" src="js/jquery.js"></sc ...

  9. 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···

    doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...

随机推荐

  1. 关于Java多线程的一些常考知识点

    前言 Java多线程也是面试中经常会提起到的一个点.面试官会问:实现多线程的两种方式以及区别,死锁发生的4个条件以及如何避免发生死锁,死锁和活锁的区别,常见的线程池以及区别,怎么理解有界队列与无界队列 ...

  2. android开发_文本按钮 与 输入框

    1 TextView:    属性与值 android:text="文本" android:textSize="20sp"              //sp为 ...

  3. LGOJ P3919【模板】可持久化数组（可持久化线段树/平衡树）

    代码 //可持久化线段树 #include <cstdio> using namespace std; struct node { node *Lnode,*Rnode; int val; ...

  4. list set map区别及适用场景

    list与Set.Map区别及适用场景   1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重 ...

  5. ActiveReports报表控件 V13 正式发布，提供在线报表设计和自适应报表布局

    重磅消息, ActiveReports V13 正式发布!本次更新 ActiveReports 将给您带来全新的报表设计体验:提供在线报表设计器.提供响应式布局和屏幕尺寸自适应能力.提供全新的图表…… ...

  6. Python链接Oracle数据库

    说明:以下所需安装的所有软件版本必须跟系统一致,即系统是64位,软件就得是64位,否则会出现各种链接报错的情况. 现以64位系统,python 3.6.5  64位为例: (一)安装cx_Oracle ...

  7. Java后台判断是否是ajax请求，并进行处理

    Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 >>>>>>>>>>>>>>&g ...

  8. EntityFrameworkCore将数据库Timestamp类型在程序中转为long类型

    EntityFrameworkCore将数据库Timestamp类型在程序中转为long类型 EntityFrameworkCore Entity public class Entity { publ ...

  9. GeoJson

    几何对象.特征对象.特征对象集合.

  10. Xiangqi（简单模拟）

    4746: Xiangqi 时间限制(普通/Java):1000MS/3000MS     内存限制:65536KByte 总提交: 15            测试通过:2 描述 Xiangqi i ...