zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    [Java解惑]数值表达式
    Java使用LdAP获取AD域用户
    LDAP Error Codes
    Excel向上取整
    java中的三种取整函数
    Dwz手册的补充说明和常见问题
    【转】BSON数据格式
    go语言合并两个数组
    vscode远程修改文件('file': A system error occured )
    [转]Linux 桌面玩家指南:20. 把 Linux 系统装入 U 盘打包带走
  • 原文地址:https://www.cnblogs.com/douglasvegas/p/4816834.html
Copyright © 2011-2022 走看看