美文网首页
Layui 模板laytpl

Layui 模板laytpl

作者: SkTj | 来源:发表于2019-12-12 13:58 被阅读0次

    //第一步:编写模版。你可以使用一个script标签存放模板,如:
    <script id="demo" type="text/html">
    <h3>{{ d.title }}</h3>
    <ul>
    {{# layui.each(d.list, function(index, item){ }}
    <li>
    <span>{{ item.modname }}</span>
    <span>{{ item.alias }}:</span>
    <span>{{ item.site || '' }}</span>
    </li>
    {{# }); }}
    {{# if(d.list.length === 0){ }}
    无数据
    {{# } }}
    </ul>
    </script>

    //第二步:建立视图。用于呈现渲染结果。
    <div id="view"></div>

    //第三步:渲染模版
    var data = { //数据
    "title":"Layui常用模块"
    ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
    }
    var getTpl = demo.innerHTML
    ,view = document.getElementById('view');
    laytpl(getTpl).render(data, function(html){
    view.innerHTML = html;
    });

    模板语法

    {{ d.field }} 不转义
    {{= d.field }} 转义
    {{# JavaScript表达式 }}
    {{#
    var fn = function(){
    return '2017-08-18';
    };
    }}
    {{# if(true){ }}
    开始日期:{{ fn() }}
    {{# } else { }}
    已截止
    {{# } }}

    {{! template !}}
    对一段指定的模板区域进行过滤,即不解析该区域的模板。注:layui 2.1.6 新增
    <div> {{! 这里面的模板不会被解析 !}}</div>

    重新定义模板分隔符

    laytpl.config({
    open: '<%',
    close: '%>'
    });

    //分割符将必须采用上述定义的
    laytpl([
    '<%# var type = "公"; %>' //JS 表达式
    ,'<% d.name %>是一位<% type %>猿。'
    ].join('')).render({
    name: '贤心'
    }, function(string){
    console.log(string); //贤心是一位公猿
    });

    相关文章

      网友评论

          本文标题:Layui 模板laytpl

          本文链接:https://www.haomeiwen.com/subject/syqtnctx.html