• artTemplate 简介语法模板


    <script src="dist/template.js"></script>

    下载(https://raw.github.com/aui/artTemplate/master/dist/template.js)

    编写模版

    <script id="test" type="text/html">
    <h1>{{title}}</h1>
    <ul>
    {{each list as value i}}
    <li>索引 {{i + 1}} :{{value}}</li>
    {{/each}}
    </ul>
    </script>
    渲染数据

    var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;
    简介语法

    {{if admin}}
    {{include 'admin_content'}}

    {{each list}}
    <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
    {{/if}}
    9.1、 artTemplate 原生 js 模板语法版

    使用

    在页面中引用模板引擎:

    <script src="dist/template-native.js"></script>
    下载(https://raw.github.com/aui/artTemplate/master/dist/template-native.js)

    表达式

    <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。
    输出表达式

    对内容编码输出:

    <%=content%>
    不编码输出:

    <%=#content%>
    编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。

    逻辑

    支持使用 js 原生语法

    <h1><%=title%></h1>
    <ul>
    <%for(i = 0; i < list.length; i ++) {%>
    <li>条目内容 <%=i + 1%> :<%=list[i]%></li>
    <%}%>
    </ul>
    模板不能访问全局对象,公用的方法请参见文档 辅助方法 章节 模板包含表达式

    用于嵌入子模板。

    <% include('template_name') %>
    子模板默认共享当前数据,亦可以指定数据:

    <% include('template_name', news_list) %>
    辅助方法

    使用template.helper(name, callback)注册公用辅助方法,例如一个基本的 UBB 替换方法:

    template.helper('$ubb2html', function (content) {
    // 处理字符串...
    return content;
    });
    模板中使用的方式:

    <% $ubb2html(content) %>

  • 相关阅读:
    装饰器和表达生成式
    函数
    字符编码
    函数基础
    列表,字典与集合
    Linux Semaphore
    tp5安装easyWeChat
    wx.request
    小程序设计规范
    小程序的概念和特点
  • 原文地址:https://www.cnblogs.com/huqinhan/p/5705868.html
Copyright © 2020-2023  润新知