artTemplate模板的使用

官方开源地址:https://github.com/aui/artTemplate

补充一:

默认对 html 进行转义输出请使用:{{=$value}},就是前面加上=号,不然比如图片地址,会显示<img src=...>而不是显示图片了,也可以关闭默认的转义功能template.defaults.escape = false

补充二:

可以使用简单方式来循环,更复杂的判断嵌套都可以,要比ToDo强

比如:

<script id="message-template" type="text/html">
                    <ul>
                    {{each result}}
                    {{if $value.conversationType==‘SYSTEM‘}}
                    <li>
                        <a tapmode="active" onclick="openWin(‘requestinfo‘)">
                         <div style="background-image:url(../image/icon-system.png)">
                         <span id="unread">{{$value.unreadMessageCount}}</span>
                         <span><h2>系统消息</h2><h3 id="latestMessage">{{$value.latestMessage.text}}</h3></span>
                         <span id="time{{$index}}" sentTime={{$value.sentTime}}></span>
                        </div>
                        </a>
                    </li>
                    {{else}}
                      {{if $value.senderUserId!=$value.currUserId}}
                      <li>
                        <a tapmode="active" onclick="openChat(this)" UserId="{{$value.targetId}}" RealName="{{$value.latestMessage.extra.split(‘,‘)[0]}}" targetPortrait="{{$value.latestMessage.extra.split(‘,‘)[1]}}">
                         <div style="background-image:url({{$value.latestMessage.extra.split(‘,‘)[1]}})">
                         <span id="unread">{{$value.unreadMessageCount}}</span>
                         <span><h2>{{$value.latestMessage.extra.split(‘,‘)[0]}}</h2><h3 id="latestMessage">{{$value.latestMessage.text}}</h3></span>
                         <span id="time{{$index}}" sentTime={{$value.sentTime}}></span>
                        </div>
                        </a>
                      </li>
                      {{else}}
                      <li>
                        <a tapmode="active" onclick="openChat(this)" targetUserId="{{$value.targetId}}" targetRealName="{{$value.latestMessage.extra.split(‘,‘)[3]}}" targetPortrait="{{$value.latestMessage.extra.split(‘,‘)[4]}}">
                         <div style="background-image:url({{$value.latestMessage.extra.split(‘,‘)[4]}})">
                         <span id="unread">{{$value.unreadMessageCount}}</span>
                         <span><h2>{{$value.latestMessage.extra.split(‘,‘)[3]}}</h2><h3 id="latestMessage">{{=$value.latestMessage.text}}</h3></span>
                         <span id="time{{$index}}" sentTime={{$value.sentTime}}></span>
                        </div>
                        </a>
                      </li>
                      {{/if}}
                    {{/if}}
                    {{/each}}
                    </ul>
                </script>
时间: 2024-10-11 20:04:42

artTemplate模板的使用的相关文章

artTemplate模板引擎学习实战

在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javascript引擎.而javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML. 如果有不了解的朋友,可以前往这两篇文章: 淘宝购物车页面 PC端和移动端实战 淘宝购物车页面 智能搜索框Ajax异步加载数据 源码地址: GitHub:Uncle-Keith 回

使用 artTemplate模板

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>使用 artTemplate模板</title> <!-- 第一步:引入artTemplate模板引擎 --> <script src="/js/template.js"></script> <style> .on{color

在Express中配置使用art-template模板引擎

先安装需要使用的包 cnpm install --save art-templatecnpm install --save express-art-template 配置(官网案例) var express = require('express') var express = require('express'); var app = express();//配置使用art-template模板引擎//第一个参数表示,当渲染以 .art 结尾时使用art-template模板引擎//expres

Node学习之(第三章:art-template模板引擎的使用)

前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的JavaScript 模板引擎,不仅可以在浏览器(前端)使用,同时也可以在Node中使用. GitHub地址:art-template 文档:官方中文 本章节我们来探讨下Node中使用art-template模板引擎生成一个标准的HTML文档. 主体 art-template原理就是将一个字符串数据按照模

artTemplate模板引擎的源码拜读

最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到今年上半年由于项目需要就想着要不试试腾讯的artTemplate,感觉牛逼也吹的挺响的.开始了解后,觉得它比我之前使用过的jade.doT都好用,调试神马的也方便很多,采用预编译的方式也让性能非常优越. 其实看了源码后简单的总结出来就是这么一句话:就是先获取html中对应的id下得innerHTML

artTemplate模板引擎源码拜读

最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到今年上半年由于项目需要就想着要不试试腾讯的artTemplate,感觉牛逼也吹的挺响的.开始了解后,觉得它比我之前使用过的jade.doT都好用,调试神马的也方便很多,采用预编译的方式也让性能非常优越. 其实看了源码后简单的总结出来就是这么一句话:就是先获取html中对应的id下得innerHTML

artTemplate 模板使用

下载github中文件,浏览器引用lib/template-web.js 模板html: {{each ProductInfoList as prd}} <div class="result-item clearfix"> <div class="item-left clearfix" pid="{{prd.PrdId}}"> <div class="left-img"> <img s

artTemplate模板引擎

来源:http://blog.csdn.net/joyhen/article/details/21233525 编写模板 使用一个type="text/html"的script标签存放模板: <script id="test" type="text/html"> <h1><%=title%></h1> <ul> <%for(i = 0; i < list.length; i

基础 - artTemplate模板

Github地址 https://github.com/aui/artTemplate 新一代的JS模板引擎 有两种使用方法 简洁版与原生版,分别对应着两种js文件 https://raw.githubusercontent.com/aui/artTemplate/master/dist/template.js https://raw.githubusercontent.com/aui/artTemplate/master/dist/template-native.js <script type

artTemplate模板使用补充

1. 添加辅助方法 ``template.helper(name, callback)``辅助方法一般用来进行字符串替换,如 UBB 替换.脏话替换等. 例如扩展一个UBB替换方法: template.helper('$ubb2html', function (content) { return content .replace(/\[b\]([^\[]*?)\[\/b\]/igm, '<b>$1</b>') .replace(/\[i\]([^\[]*?)\[\/i\]/igm,