artTemplate4.0使用总结以及与JSP页面冲突解决方案

2524989571-599d548e962c9_articlex.png

• art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
  Git地址:https://aui.github.io/art-tem...
  模板语法
  art-template支持两种语法，标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

• 标准语法

  {{if user}}
    <h2>{{user.name}}</h2>
  {{/if}}
  

<script id="card" type="text/html" >
     {{each articles as data index}}
        {{if data.style_type == 1}}
         <!-- 左文右图 -->
                <div class="card s6" name="{{ data.url }}>">
                    <a href="{{ data.url }}">
                        <div class="card_middle">
                            <div class="card_right">
                                <h3 class="news-title">{{ data.title }}</h3>
                                 <p class="news-info">
                                     <span class="news_source">{{  data.source_name  }}</span>
                                     <span class="news_time">{{ $imports.formatDate(data.publish_time)  }}</span>
                                     <span class="news_comment">{{ data.comment_count }}条评论</span>
                                 </p>
                            </div>
                            <div class="card_right_img">
                                <img class="lazy" data-url="{{ $imports.crop( data.thumbnails[0].url,2,400,330) }}"  alt="" />
                            </div>
                        </div>                                          
                    </a>
                </div>
            {{ else if data.style_type == 2 }}
            <!-- 视频 -->
                <div class="card s3" name="{{ data.url }}">
                        <a href="javascript:void(0)">
                            <div class="video_container">
                                <div class="video_img">
                                    <div class="video_mask">
                                        <h3 class="dotdot line3">{{ data.title }}</h3>
                                    </div>  
                                        <span class="play-btn" name="{{ data.videos[0].video_src }}"></span>
                                        <img  class="lazy" data-url="{{ data.thumbnails[0].url }}"  alt="" />
                                </div>
                                <video style="visibility:hidden;" controls="" poster="{{ data.thumbnails[0].url }}"></video>
                            </div>
                             <p class="news-info">
                                <span class="news_source">{{  data.source_name  }}</span>
                                <span class="news_time">{{ $imports.formatDate(data.publish_time)  }}</span>
                                <span class="news_comment">{{ data.comment_count }}条评论</span>
                            </p>
                        </a>
                </div>          
        {{ /if }}
     {{/each}}
</script>

• 渲染模板template(id, data)

      $('.content').prepend(template('card',res.data))
       标准语法更容易读写，但是却无法处理复杂的逻辑。
  
  

3383803729-599d64f394724_articlex.png

• 原生语法

      <% if (user) { %>
        <h2><%= user.name %></h2>
      <% } %>
  

  <script id="card" type="text/html" >
     <% for(var i = 0; i < articles.length ; i++){ %>
          <% var data =articles[i] %>
          <% if( data.style_type==1 ){ %>
          <!-- 左文右图    -->
                <div class="card s5" name="<%= data.url %>">
                      <a href="javascript:void(0)">
                          <div class="card_middle">
                              <div class="card_left">
                                  <h3 class="news-title"><%= data.title %></h3>
                                   <p class="news-info">
                                       <span class="news_source"><%=  data.source_name  %></span>
                                       <span class="news_time"><%= $imports.formatDate(data.publish_time)  %></span>
                                       <span class="news_comment"><%= data.comment_count %>条评论</span>
                                   </p>
                              </div>
                              <div class="card_right_img">
                                  <img class="lazy" data-url="<%= $imports.crop( data.thumbnails[0].url,1,400,330) %>"  alt="" />
                              </div>
                          </div>                                          
                      </a>
              </div>
          <% }else if( data.style_type==2 ){ %>
          <!-- 视频 -->
                   <div class="card s3" name="<%= data.url %>">
                          <a href="javascript:void(0)">
                              <div class="video_container">
                                  <div class="video_img">
                                      <div class="video_mask">
                                          <h3 class="dotdot line3"><%= data.title %></h3>
                                      </div>  
                                          <span class="play-btn" name="<%= data.videos[0].video_src %>"></span>
                                          <img  class="lazy" data-url="<%= data.thumbnails[0].url %>"  alt="" />
                                  </div>
                                  <video style="visibility:hidden;" controls="" poster="<%= data.thumbnails[0].url %>"></video>
                              </div>
                               <p class="news-info">
                                  <span class="news_source"><%=  data.source_name  %></span>
                                  <span class="news_time"><%= $imports.formatDate(data.publish_time)  %></span>
                                  <span class="news_comment"><%= data.comment_count %>条评论</span>
                              </p>
                          </a>
                      </div>
           <% } %>
      <% } %>
  </script>
  

• 渲染模板template(id, data)

     $('.content').prepend(template('card',res.data))
    原生语法好处理复杂的逻辑，但是因为使用 <%>符号，如果项目中使用了jsp就会语法冲
     突，这个时候只能使用标准语法了。
  
  

---

• 调用外部函数

---

// 定义模板方法
template.defaults.imports.formatDate = function(time) {
    return G.formatDate(time)
}
template.defaults.imports.crop = function(src,type,w,h) {
    return G.crop(src,type,w,h)
}
4.0之前用的是这种方式
template.helper('formatPrice', function(price, type) {});

上面的例子中要调用此函数需要通过imports方法注册：