<!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. 51行代码实现简单的PHP区块链

    本文原始地址:php区块链demo 今年区块链特别火,我也很火啊.我火什么呢.前几年,公众平台出现,还得花时间去学去看,后来小程序出现,又得花时间精力去学去看.现在比特币.以太坊等去中心化货币带起了区 ...

  2. MySQL5.7 JSON类型及其相关函数的学习

    mysql> CREATE TABLE `json_table` ( `id` int(11) NOT NULL AUTO_INCREMENT, `info` json NOT NULL, PR ...

  3. 重写用户模型时报错AttributeError: type object ‘自定义类’ has no attribute ‘USERNAME_FIELD’

    view中导入:from django.contrib.auth.models import AbstractBaseUser settings.py中设置了:AUTH_USER_MODEL='app ...

  4. Laravel5.5学习笔记

    安装composer 下载安装脚本 php -r "copy('https://install.phpcomposer.com/installer', 'composer-setup.php ...

  5. opencv学习之路（35）、SURF特征点提取与匹配（三）

    一.简介 二.opencv中的SURF算法接口 三.特征点匹配方法 四.代码 1.特征点提取 #include "opencv2/opencv.hpp" #include < ...

  6. 使用pynlpir增强jieba分词的准确度

    在使用jieba分词时,发现分词准确度不高.特别是一些专业词汇,比如堡垒机,只能分出堡垒,并不能分出堡垒机.这样导致的问题是很多时候检索并不准确. 经过对比测试,发现nlpir进行分词效果更好.但是n ...

  7. Overture如何更改音符符尾设置

    Overture作为一款专业的五线谱打谱软件,深受每一个音乐爱好者喜爱.在我们使用Overture来进行打谱操作时,往往会遇到下面这种情况:我们一般打上两个八分音符时,软件会自动符尾相连,但当我们连续 ...

  8. 通过KSoap三方插件解析WebService接口方法

    话不多说,正文如下: 1.在lib中放入ksoap2的jar包并导入 2.在xml 配置文件中加入: <!-- 访问网络的权限 --> <uses-permission androi ...

  9. python数据库多字段插入

    # -*- co;ding: utf-8 -*-#企业详细信息写入数据库+征信得分import pymysqlfrom impala.dbapi import connect conn = pymys ...

  10. 拿取页面值 跟拿取value里面的值

    拿取页面输入框的数值 使用  val() val()设置或返回表单字段的值 拿取value里面的数值 value(); attr() 获取属性值