doT.js-doT模板方便快捷的组织页面DOM

重来没有想过，作为一个坐吃等死的前端也会有学习引擎模板的一天

都是被现实所逼呀.学习优秀代码时，一句一句翻译。忽然看到{{ }}这个包裹的代码。糟心了！看不懂，咋办？学呀！！！！！！

这是我开始学习的第一个引擎模板！！！鼓掌

doT.js

插件描述：doT模板方便快捷的组织页面DOM

doT.js特点是快，小，无依赖其他插件

当然了，网上有很多同僚都有介绍这个模板的，基本全部一样。所以我也不会有所改动（照搬）

1.基本使用套路百度翻译：（真心的，这个百度翻译后的中文我自己都不明白）

{{ }}for evaluation（百度翻译：为了评价）

{{= }}for interpolation（百度翻译：插值法） //理解为：赋值

{{~ }}for array iteration（百度翻译：数组代）

{{? }}for conditionals（百度翻译：条件句）

{{！ }}for interpolation with encoding（百度翻译：用编码进行插值）

{{# }}for compile-time evaluation/includes and partials（百度翻译：编译时的评估/包含和部分）

{{## #}}for compile-time defines（百度翻译：编译时间定义）

2.举例

首先是要引用插件的

1）.for interpolation 赋值

格式：

{{= }}

<div id="interpolation"></div>

<script id="interpolationtmpl1" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</script>

<script>

var dataInter1 = {
"name": "Jake",
"age": 31
};
var interText1 = doT.template($("#interpolationtmpl1").text());
$("#interpolation").html(interText1(dataInter1));
</script>

转载于:https://www.cnblogs.com/liuqingxia/p/8994609.html

doT.js-doT模板方便快捷的组织页面DOM相关推荐

doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
doT js模板入门
官网: http://olado.github.io doT.js详细使用介绍使用方法: {{= }} for interpolation {{ }} for evaluation {{~ }} f ...
doT js模板入门 3
for 循环前判断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...
前端渲染引擎doT.js解析
背景前端渲染有很多框架,而且形式和内容在不断发生变化.这些演变的背后是设计模式的变化,而归根到底是功能划分逻辑的演变:MVC->MVP->MVVM(忽略最早混在一起的写法,那不称为模式) ...
doT js 宏的使用
doT js 宏的使用 Html代码 <script id="serviceItemTemplate" type="text/x-dot-template&qu ...
doT.js实现混合布局，判断，数组，函数使用，取模，数组嵌套
doT.js实现混合布局数据结构 {"status": "1","msg": "获取成功","info&qu ...
dot.js嵌套html文件,doT.js实现混合布局，判断，数组，函数使用，取模，数组嵌套...
doT.js实现混合布局数据结构 { "status": "1", "msg": "获取成功", "info ...
html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
微信小程序js发送模板消息
微信小程序的Java的的后台获取的的的access_token存储数据库并接通本更新https://blog.csdn.net/weixin_41716049/article/details/8406 ...

doT.js-doT模板方便快捷的组织页面DOM

doT.js-doT模板方便快捷的组织页面DOM相关推荐

最新文章

热门文章