<!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. 关于用IIS在.net平台发布网页的一些坑

    说明:由于需要显示页面的表格的内容,要用pageOffice插件,而装pageoffice之前需要装.net3.5,直接导入. 为什么要分别装.net4.5和.net3.5 ? 都要装?  问题:刚才 ...

  2. php 随机红包算法

    <?php /** * 红包分配算法 * * example * $coupon = new Coupon(200, 5); * $res = $coupon->handle(); * p ...

  3. server.xml引入子文件配置（tomcat虚拟主机）

    在配置tomcat虚拟主机时候,如何每一个虚拟主机写成单独文件,server.xml包含这些子文件? 如以下<OneinStack>中,添加JAVA环境虚拟主机后tomcat配置文件详情: ...

  4. Maven解决包冲突

    依赖树 $ mvn dependency:tree [WARNING] [WARNING] Some problems were encountered while building the effe ...

  5. 使用Travis CI自动部署博客到github pages和coding pages

    每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...

  6. [math]本博客已经支持书写数学公式

    本博客已经支持mathjax格式公式 使用方法 使用方法单美元符号加单行公式. 使用方法双美元符号加多行公式. 展示 单行公式:\(x^2+2x+1=0\) 多行公式:\[x=\frac{{-b}\p ...

  7. bootstrap table 前后端分页（超级简单）

    前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...

  8. leetcode02大数相加

    惭愧惭愧,这道题居然卡了两天,犯了一堆错误,现在一一总结 错误 头一天我看给的测试用例误以为输入是数组,做了半天也无法输出链表的正确格式,后来把输入当成链表,才正确了 我没看到编辑器给了一套链表,自己 ...

  9. Spring定时任务@Scheduled注解使用方式

    1.开篇 spring的@Scheduled定时任务相信大家都是十分熟悉.最近在使用过程中发现了一些问题,写篇文章,和大家分享一下.结论在最后,不想看冗长过程的小伙伴可以直接拉到最后看结论. 2.简单 ...

  10. Oracle 并发创建索引

    建索引时,我们为了建索引快,会加上并行,加上并行之后,此列索引就会是并行了.访问有并行度的索引时,CBO可能可能会考虑并行执行,这可能会引发一些问题,如在服务器资源紧张的时候用并行会引起更加严重的争用 ...