dot.js-js模板引擎使用,教程,入门

dot.js是一个模板框架,在web前端使用。

doT.min.js是dot.js的压缩版。

简单demo代码:

html、javascript代码一览:

在浏览器运行的效果:

dot.js作为模板引擎,

主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码。

这是很简单的web前端模板框架,

简单说几个东西,你就会用了!

1、在模板中,it这个变量,就是传递进去的数据对象,应该就是英语的items;

2、 doT.template( template )( obj )  代码解释:把模板template,作为参数传入 doT.template()  方法,dot就把模板处理一下,然后你再把数据对象传入,返回值,就是html与数据 一起生成的html代码了,再拼 接到页面即可;

3、在模板中,{{}}  包裹的内容,就是javascript代码,dot会负责处理,因为这写法怪异,新手一般出现模板写错的情况,仔细排查即可 。

演示中的源码:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body >

<ul id=‘showInfo‘>

<script type="text/template" charset="utf-8" id=‘template_1‘>

{{if( it && it.length>0 ){ }}

{{for(var i=0; i<it.length; i++){ }}

<li>{{=it[i].name}}</li>

{{ } }}

{{ }else{ }}

<li>没有数据。</li>

{{ } }}

</script>

</ul>

<br>

<hr >

<br>

<ul id=‘showInfo2‘>

</ul>

</body>

<script type="text/javascript" charset="utf-8" src=‘doT.min.js‘></script>

<script type="text/javascript" charset="utf-8">

var template=document.getElementById(‘template_1‘).innerHTML;

var obj=[{name:‘d1‘},{name:‘d2‘},{name:‘d3‘}];

//传递一个有数据的数组进去

document.getElementById(‘showInfo‘).innerHTML=doT.template( template )( obj );

//传入的数据为空

document.getElementById(‘showInfo2‘).innerHTML=doT.template( template )( [] );

</script>

</html>

时间: 2024-10-12 03:53:05

dot.js-js模板引擎使用,教程,入门的相关文章

js常用模板引擎

baiduTemplate(百度).artTemplate(腾讯).juicer(淘宝).xtemplate.doT.Jade 1.Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建web模板. 在加载时被预编译,而不是到了客户端执行到代码时再去编译,这样可以保证模板加载和运行的速度. http://handlebarsjs.com/ http://caibaojian.com/handlebars-js.html 2.Jade是一个有着完善

Mustache.js前端模板引擎初识

目前在看一个项目,在一遍遍撸代码的时候,发现代码里调用了一个Mustache.render()方法. 经过百度后,发现Mustache.js是一套轻量级模板引擎. 所以现在就要仔细学习一下,它是如何工作的. 一般来说mustache在js中的使用方法都是如下: var template = $('#template').html(); Mustache.parse(template);   // optional, speeds up future uses var rendered = Mus

Mustache.js前端模板引擎源码解读【二】

上一篇解读完解析器的代码,这一篇就来解读一下渲染器. 在之前的解读中,解读了parseTemplate如何将模板代码解析为树形结构的tokens数组,按照平时写mustache的习惯,用完parse后,就是直接用 xx.innerHTML = Mustache.render(template , obj),因为此前会先调用parse解析,解析的时候会将解析结果缓存起来,所以当调用render的时候,就会先读缓存,如果缓存里没有相关解析数据,再调用一下parse进行解析. Writer.proto

node.js ejs模板引擎将后端数据赋值给前端js

使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使用ejs,选它是因为跟Asp.Net的模板引擎有点相似吧. 先来看一下这几个模板引擎: jade模板 html head title #{title} meta(charset="UTF-8") body div.description #{description} ul - each d

node.js (原生模板引擎模板)

app01 // 引入http模块 const http = require('http'); //连接数据库 require('./model/connects'); // 创建网站服务器 const app = http.createServer(); //引入模板引擎 const template = require('art-template'); // 引入path模块 const path = require('path'); // 引入处理日期的第三方模块 const datefo

基于 Koa平台Node.js开发的KoaHub.js的模板引擎代码

koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-handlebars Use with koa var koa = require('koa'); var hbs = require('koahub-handlebars'); var app = koa(); // koahub-handlebars is middleware. `use` it 

&lt;script id=&quot;nav_template&quot; type=&quot;text/x-handlebars-template&quot;&gt; JS的模板引擎 Handlebars.js 模板引擎

http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

js模板引擎介绍搜集

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

调研js模板引擎

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板