zoukankan      html  css  js  c++  java
  • 模板引擎文档

    <!DOCTYPE html>
    <html class="ui-page-login">
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title>laytpl模板引擎实例</title>
            <!--CSS-->
            <script src="js/laytpl/laytpl.js"></script>
            
            <script>
                //第三步:渲染模版
    
                //数据
                 var data = {
                   title: '前端卷子',
                   intro: '一群码js的骚年,幻想改变世界,却被世界改变。',
                   list: [{ name: '贤心', city: '杭州' }, { name: '谢亮', city: '北京' }, { name: '浅浅', city: '杭州' }]
                 };
             
                 window.onload = function () {                     
                   var gettpl = document.getElementById('testTpl').innerHTML;
                   laytpl(gettpl).render(data, function (html) {
                     //得到的模板渲染到html
                     document.getElementById('testDiv').innerHTML = html;
                   });
                 }
            </script>
        </head>
    
        <body>
            
            <!-- 第一步:编写模版。你可以使用一个script标签存放模板,如: -->
            <script id="testTpl" type="text/html">
             <h1>{{ d.title }}</h1>
             <p>{{d.intro}}</p>
             <ul>
               {{# for(var i = 0; i < d.list.length; i++){ }}
               <li>
                 <span>姓名:{{ d.list[i].name }}</span>
                 <span>城市:{{ d.list[i].city }}</span>
               </li>
               {{# } }}
             </ul>
           </script>
           
           <!-- 第二步:建立视图。用于呈现渲染结果。 -->
           <div id="testDiv"></div>
        </body>
    
    </html>

    模板语法

    语法说明示例
    {{ d.field }} 输出一个普通字段,不转义html

     

    <div>{{ d.content }}</div>

    {{= d.field }} 输出一个普通字段,并转义html

     

    <h2>{{= d.title }}</h2>

    {{# JavaScript表达式 }} JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。

    注意:如果你是想输出一个函数,正确的写法是:{{ fn() }},而不是:{{# fn() }}

     

    {{#var fn = function(){return '2017-08-18';};

    }}

    {{# if(true){ }}开始日期:{{ fn() }}

    {{# } else { }}已截止{{# } }}

    {{! template !}} 对一段指定的模板区域进行过滤,即不解析该区域的模板。注:layui 2.1.6 新增

     

    <div> {{! 这里面的模板不会被解析 !}}</div>

     
  • 相关阅读:
    【webrtc】PTCPeerConnection(28)
    windows传文件到linux服务器--- secureCRT PK xftp
    Navicat premium查看数据库表中文注释的两种方式
    Jmeter 5.1实现图片上传接口测试
    查看服务器内存、CPU、网络等占用情况的命令--汇总
    AWS服务器上安全组端口设置和访问的问题
    linux服务器时间乱码问题解决
    连接linux的几款工具 简介
    服务器上build.xml文件乱码解决(亲测有效)
    jmeter通过ant执行时报错 jmeter.log not found
  • 原文地址:https://www.cnblogs.com/starksoft/p/10012814.html
Copyright © 2011-2022 走看看