<!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. HDOJ1312 Red and black(DFS深度优先搜索)

    There is a rectangular room, covered with square tiles. Each tile is colored either red or black. A ...

  2. opencv学习之路（38）、Mat像素统计基础——均值，标准差，协方差；特征值，特征向量

    本文部分内容转自 https://www.cnblogs.com/chaosimple/p/3182157.html 一.统计学概念 二.为什么需要协方差 三.协方差矩阵 注:上述协方差矩阵还需要除以 ...

  3. .equals()到底是什么意思？

    .equals() 在Java中判断是否相等,与 == 的区别是 .equals() 只判断值是否相等,不管两者是否存在同一地址.而 == 则是判断值与存在地址都得相等 扩展资料: 由equals的源 ...

  4. Android中自定义广播的实现

    今天尝试了自定义的广播,说是自定义的广播其实质就是自己编写一个类继承broadcastreceiver类,然后再onreceiver方法中实现某些功能,在这个过程中我们可以自定义我们要发出的广播,可以 ...

  5. P4233 射命丸文的笔记

    思路 题目要求求的是哈密顿回路的期望数量,实际上就是哈密顿回路的总数/有哈密顿回路的竞赛图的数量 n个点的所有竞赛图中哈密顿回路的总数为 \[ (n-1)! 2^{\frac{n(n-1)}{2}-n ...

  6. 意外get接近完美的黑苹果 (UEFI + GPT)

    本人大学生一枚,对于高大上的 MAC OS 只能是摸摸口袋 咽咽口水啦.听说黑苹果,就是安装在普通的 pc 上的 MAC系统,那么对应的苹果电脑上的 MAC OS 系统就为白苹果了. 个人也想啃一口黑 ...

  7. ECharts导出word 图表模糊失真

    在项目中会有这样的需求,echars生成图表导入到word中 在项目中用的插件 博主有一篇文章将的是  vue使用jquery的三方插件jquery.wordexport.js   https://b ...

  8. 蓝牙 - 小米手环3 NFC版BLE协议研究

    0x01 前言 最近买到了小米手环3nfc版本,基本上实现了我对手环的所有功能需求,高中的时候就缠线圈做过戒指一卡通,但是缺陷是不好看,而且只能储存一张卡,等 手环3nfc版我认为比较好的功能 可以储 ...

  9. 悲观并发 乐观并发 Entity Framework Core中的并发处理

    悲观并发策略 A用户发起一个请求   开启了事务 查询到了某一条数据 进行修改     在A提交事务之前 其他人都不能对这条数据进行修改 这种策略最常见的一个问题就是死锁  比如A修改X记录,B修改Y ...

  10. 关于分布式版本控制系统Git与集中式版本控制系统SVN的区别

    我觉得最最主要的区别就是:分布式Git主要是在本地有各个历史版本,在不联网的时候,也可以更新到最新版本和查看过去的版本,而集中式SVN是所有人都将版本上传到中央服务器,当出现断网情况的时候,用户只有一 ...