<!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. netperf

    官网 下载 装包 yum -y install make automake libtool pkgconfig libaio-devel 编译安装 ./autogen.sh ./configure m ...

  2. ORACLE——RMAN 参数解读

    查看默认rman配置参数 oracle用户下登录rman:rman target / 查看所有配置参数详情:show all show all的第一行:using target database co ...

  3. Windows环境下最新OpenCV和Contribute代码的联合编译【20180926更新红字】

    解决这个问题,目的在于获得并使用最新的完全版本的代码,主要方法是对CMake能够熟练使用,并且对编译等基础支持有所了解. 因为这篇博客经过多次修改,所以里面的内容和配图可能有不是完全比对的地方,但是只 ...

  4. 读Vue源码 （依赖收集与派发更新）

    vue的依赖收集是定义在defineReactive方法中,通过Object.defineProperty来设置getter,红字部分主要做依赖收集,先判断了Dep.target如果有的情况会执行红字 ...

  5. ssh到虚拟机---一台主机上

    问题描述:我们需要ssh来编辑虚拟机中的文件,以此提高工作效率.但是新建的虚机一般来说没有开启ssh服务,所以需要在虚拟机上开启ssh服务. 1)检查是否安装了SSH rpm -qa |grep ss ...

  6. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  7. Facebook token更新

    How to refresh Facebook access token python代码: 可以用vs code来运行,依赖python2.*,如果使用python3.*可能会出现部分包不兼容 sh ...

  8. vscode下运行matlab记录

    Linux下安装MATLAB可参照以下链接: https://blog.csdn.net/qq_31285709/article/details/82083902 在vscode 中运行.m文件. 首 ...

  9. Linux TOP命令按内存占用排序和按CPU占用排序

    先输入top 然后 按P – 以 CPU 占用率大小的顺序排列进程列表 按M – 以内存占用率大小的顺序排列进程列表 top命令是Linux下常用的性能分析工具,比如cpu.内存的使用,能够实时显示系 ...

  10. Cow Cycling 动态规划

    1552: Cow Cycling 时间限制(普通/Java):1000MS/10000MS     内存限制:65536KByte总提交: 39            测试通过:20 描述 The ...