doT js模板入门-白红宇

doT.js github地址:

实例1:简单

    
                 
         
      
       Hi {
    {=it.name}}!
      
    
      
       {
    {=it.age || ''}}

运行结果:

实例二:条件判断


     
          {
    {? !it.name }}    
      
        你还没有名字
      
    {
    {?? }}    
      
       Oh, I love your name, {
    {=it.name}}!
      
    {
    {?}}

运行结果:

if条件判断还有第二种写法:


     
          {
     { if(!it.name){ }}    
      
        你还没有名字
      
    {
     { } else { }}    
      
       Oh, I love your name, {
     {=it.name}}!
      
    {
     { }  }}

实例三:循环+条件判断


     
          {
    { for(var prop in it) { }}        {
    {? typeof it[prop]=='object' }}            
      
       KEY:{
    {= prop }}---VALUE:
      
            {
    { for(var prop2 in it[prop]) { }}                
      
       key:{
    {= prop2 }}---value:{
    {= it[prop][prop2] }}
      
            {
    { } }}        {
    {?? }}            
      
       KEY:{
    {= prop }}---VALUE:{
    {= it[prop] }}
      
        {
    {?}}    {
    { } }}

运行结果:

普通循环(不是foreach)

源码下载地址:

说明:

1,{

{? typeof it[prop]==’object’ }} 表示条件判断,结束标签是{

{?}}

2, {

{?? }}是条件判断的else

3,{

{ 和{

{? 中均可以使用原生的js语法,如for,typeof 等

4,模板并不是一定要放在script标签中,也可以放在隐藏的div标签中

参考:

作者: 黄威

博客地址: