原生语法

  使用原生语法,需要导入template-native.js文件。在HTML中定义模板,注意模板的位置,不要放到被渲染区域,防止模板丢失。

 <script id="tpl" type="text/html">
<% for (var i = ; i < products.length; i ++) { %>
<% var product =products[i]; %>
<% if (i < ) { %>
<li>
<img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>">
<div class="flash-time-box">
<span>--</span>
</div>
<strong class="marque"><%=product.name%></strong>
<strong class="libelle"><%=product.description%></strong>
<div class="no-picto">
<span class="prod-tip">
<img src="img/grey.png" data-original="img/icon.png">
</span>
<span class="italic black">
<span class="cny-curr">¥&nbsp;<%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span>
</span>
</div>
</li>
<% } %>
<% } %>
</script>

template(id, data)

  渲染数据到页面

$('#main_panel').html(template('tpl', data));

简洁语法

  使用简洁语法,导入template-web.js文件。

 <script id="tpl" type="text/html">
{{each products as product i}}
{{if i < }}
<li>
<img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}">
<div class="flash-time-box">
<span>--</span>
</div>
<strong class="marque">{{product.name}}</strong>
<strong class="libelle">{{product.description}}</strong>
<div class="no-picto">
<span class="prod-tip">
<img src="img/grey.png" data-original="img/icon.png">
</span>
<span class="italic black">
<span class="cny-curr">¥&nbsp;{{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span>
</span>
</div>
</li>
{{/if}}
{{/each}}
</script>

  渲染数据到页面,和原生语法一样

$('#main_panel').html(template('tpl', data));

  如果是下边的这种渲染方式

$('#main_panel').html(template('tpl', data.products)); // 传入的是数组

  那么在each循环中就应该为:{{each $data as product i }}

art-template 条件表达式

{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}

模板包含表达式

  用于嵌入子模板。

{{include 'template_name'}}

  子模板默认共享当前数据,亦可以指定数据:

{{include 'template_name' news_list}}

art-template过滤器

 语法:

template.defaults.imports.过滤器名称 = function(date){
过滤器的内容
一定要注意 需要一个返回值
};

   

art-template嵌套循环

// 模板
<script type="text/html" id="phone_tpl">
{{each data v i}}
{{if v.type==}}
<img src="{{fileUrl}}{{v.message}}" alt="">
{{else if v.type==}}
{{include 'text_tpl' v.text}}
{{/if}}
{{/each}}
</script> <script type="text/html" id="text_tpl">
{{each $data vv ii}}
<div class="phone-text">{{vv}}</div>
{{/each}}
</script>

art-template模板渲染及其过滤器的更多相关文章

  1. day51:django:dispatch&模板渲染&过滤器&标签&组件&静态文件配置

    目录 1.dispatch 2.模板渲染 3.过滤器 4.标签 5.组件 6.静态文件配置 dispatch 回顾:CBV对应的URL传参 urls.py url(r'^book/(\d+)/(\d+ ...

  2. 小程序template怎样渲染页面的

    template模板渲染demo wxml页面 <view class="btmcon"> <text class="btmtitle"> ...

  3. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  4. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  5. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

  6. Django-视图函数/模板渲染/过滤器

    一.Django的视图函数 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个 ...

  7. Ajax接收Json数据,调用template模板循环渲染页面的方法

    一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...

  8. Template模板

     目标 模板介绍 模板变量 常用标签 常用过滤器 自定义过滤器 模板结构 加载静态文件 一 模板介绍 在之前的章节中,视图函数只是直接返回文本,而在实际生产环境中其实很少这样用,因为实际的页面大多是带 ...

  9. Django 模板 语法 变量 过滤器 模板继承 组件 自定义标签和过滤器 静态文件相关

    本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法   模板渲染的官方文档 关于模板渲染你只需要记两种特殊符号(语法 ...

随机推荐

  1. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...

  2. 如何在vue里面正确的引用 jquery 和 第三方插件

    vue-cli webpack全局引入jquery(jq通过npm安装的并非本地文件) 1.首先在package.json里加入, dependencies:{ "jquery" ...

  3. MongoDB_基本操作

    数据库操作 增加数据库 use db1 #如果数据库不存在,则创建数据库,否则切换到指定数据库 查询数据库 show dbs #可以看到,我们刚创建的数据库db1并不在数据库的列表中,要显示它我们需要 ...

  4. utf8_general_ci、utf8_unicode_ci和utf8_bin的区别(转载)

    例如: CREATE DATABASE IF NOT EXISTS redmine DEFAULT CHARSET utf8 COLLATE utf8_general_ci; CREATE DATAB ...

  5. 如何批量导入excel数据至数据库(MySql)--工具phpMyAdmin

    之前由于数据储存使用excel保存了所有数据,经过初步数据筛选,数据量近4000条.一条一条录入数据库显然是不可行的.以下是我所操作的步骤: 1.只保留excel的数据部分,去除第一行的具体说明 2. ...

  6. Django之瀑布流

    一. 小功能瀑布流的实现 1.完成效果图 2.代码部分 <1>models.py from django.db import models # Create your models her ...

  7. 1520dc更新与NUll语句用法

    update dbo.dc_出租信息set 出租类型 = 1where 出租类型='普通楼上房' update dbo.dc_出租信息set 朝向 = 5where 朝向 is NULL

  8. python第四周:装饰器、迭代器、内置方法、数据序列化

    1.装饰器 定义:本质是一个函数,(装饰其他函数)就是为其他函数添加附加功能 原则:不能修改被装饰函数的源代码,不能修改被装饰函数的调用方式 实现装饰器的知识储备: 函数即“变量”.每当定义一个函数时 ...

  9. [ASP.NET]asp.net动态加载用户控件

    用户控件 // 用户控件源码 namespace wzjr.control { public partial class Topic : System.Web.UI.UserControl { pub ...

  10. Android网络编程(十)Retrofit2后篇[注解]

    G相关文章 Android网络编程(一)HTTP协议原理 Android网络编程(二)HttpClient与HttpURLConnection Android网络编程(三)Volley用法全解析 An ...