artTemplate模板的使用

Posted 2020-07-24

官方开源地址：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>