<!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. pinpoint初始化hbase脚本报错

    今天在部署pinpoint的时候,执行创建表语句的脚本,报表已经存在的错误,但是那个hbase数据目录是刚创建的,表肯定是不存在的 <property> <name>hbase ...

  2. open-falcon部署v0.2.1版本

    环境准备 安装redis yum install redis -y systemctl start redis 安装mysql rpm -ivh http://dev.mysql.com/get/my ...

  3. java 动态绑定 多态

    继承链中对象方法的调用规则:当前类-->父类-->爷类-->..-->祖先类(只能向上找,不能向下找)优先级:this.method(Obj) > super.metho ...

  4. SQL Server Management Studio 执行超大脚本文件

    SQL Server Management Studio 执行超大脚本文件 启动cmd.exe , cd 到C:\Program Files (x86)\Microsoft SQL Server\11 ...

  5. linux服务基础之http协议

    URI:Uniform Resource Identifier URL: Uniform Resource Locator,用于描述某服务器某特定资源的位置 URN: Uniform Resource ...

  6. sort排序原理

    var array = [10,5,40,25,1000,1];   array.sort(compareFunction);   function compareFunction(a, b) {  ...

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

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

  8. call 和 apply方法解析

    ECAMScript 3给Function的原型定义了两个方法,它们是 `Function.prototype.call` 和 `Function. prototype.apply`.在实际开发中,特 ...

  9. oracle 11g RAC日志分布

    oracle 下的alert日志$ORACLE_BASE/diag/rdbms/orcl/orcl1/trace/alertorcl1.log grid 下的 alert 日志 $ORACLE_HOM ...

  10. 通过nginx反向代理接收应用宝回调

    年前的时候,正好公司把用来接收应用宝回调的服务从Windows服务器上迁移带Linux服务器上,没想到最后折腾了两个工作日,腾讯的文档真的无力吐槽,不知道以后会不会有人碰到我相同的问题,我先记录一下. ...