开发工作中需要,除了今天要介绍的两种template,还有很多模板,但他们的终点都是相同的,都是为了开发的便利。
是一套模板语法,开发者可以通过写一个模板区域,每次根据传入数据,然后渲染成不同的html片段。
首先需要下载 BaiduTemplate.js
接着引入一个栗子
<!doctype html><html><head><meta charset="utf-8"/><title>test</title><!-- 引入baiduTemplate --><script type="text/javascript" src="./baiduTemplate.js"></script></head><body><div id='result'></div><!-- 模板1开始,可以使用script(type设置为text/html)来存放模板片段,并且用id标示 --><script id="t:_1234-abcd-1" type="text/html"><div> <!-- 我是注释,语法均为Javascript原生语法,默认分割符为 <% %> ,也可以自定义,参见API部分 --> <!-- 输出变量语句,输出title --> <h1>title:<%=title%></h1> <!-- 判断语句if else--> <%if(list.length>1) { %> <h2>输出list,共有<%=list.length%>个元素</h2> <ul> <!-- 循环语句 for--> <%for(var i=0;i<5;i++){%> <li><%=list[i]%></li> <%}%> </ul> <%}else{%> <h2>没有list数据</h2> <%}%></div> </script><!-- 模板1结束 --><!-- 使用模板 --><script type="text/javascript">var data={ "title":'欢迎使用baiduTemplate', "list":[ 'test1:默认支持HTML转义,如输出<script>,也可以关掉,语法<:=value> 详见API', 'test2:', 'test3:', 'test4:list[5]未定义,模板系统会输出空' ]};//使用baidu.template命名空间var bt=baidu.template;//可以设置分隔符//bt.LEFT_DELIMITER='<!';//bt.RIGHT_DELIMITER='!>';//可以设置输出变量是否自动HTML转义//bt.ESCAPE = false;//最简使用方法var html=bt('t:_1234-abcd-1',data);//渲染document.getElementById('result').innerHTML=html;</script></body></html>
1.需要一个接收结果的容器
2.书写模板
- 用包起来
- 数据存放在一个json里
- 赋给一个短名变量使用,来接收baidu.template
- 使用模板,并把模板渲染出的html放入结果容器内
- 默认分隔符 <% js语法 %>
- 输出一个变量 <%=data%>
- 判断语句
<%if(list.length>1){%>
<%}else{%>
<%}%>
- 循环语句
<%for(i=0;i
<%>
- 注释
<html><head><title>Ordering notice</title></head><body><p>Dear {{ person_name }},</p><p>Thanks for placing an order from {{ company }}. It's scheduled toship on {{ ship_date|date:"F j, Y" }}.</p><p>Here are the items you've ordered:</p><ul>{% for item in item_list %}<li>{{ item }}</li>{% endfor %}</ul>{% if ordered_warranty %}<p>Your warranty information will be included in the packaging.</p>{% endif %}<p>Sincerely,<br />{{ company }}</p></body></html>
解析上述:chestnut::
- if
if hello
if else hello go work
if not go work
if or apple or pig
if and apple and pig
- for
for in
for in reversed
forloop 模板变量
- ifequal/ifnotequal 比较两个变量值并显示结果
基本用法
适用类型 模板变量、字符串、整数和小数
{%ifequal variable 1 %}
{% ifequal variable 1.23 %}
{% ifequal variable 'foo' %}
{% ifequal variable "foo" %}
- { xxx|yyy }过滤器
常用过滤器
date: 按指定的格式字符串参数格式化 date或者 datetime对象
{{ 123|add:"5" }} 给value加上一个数值
{{ "AB'CD"|addslashes }} 单引号加上转义号,一般用于输出到javascript中
{{ "abcd"|capfirst }} 第一个字母大写
{{ "abcd"|center:"50" }} 输出指定长度的字符串,并把值对中
{{ "123spam456spam789"|cut:"spam" }} 查找删除指定字符串
{{ value|date:"F j, Y" }} 格式化日期
{{ value|default:"(N/A)" }} 值不存在,使用指定值
{{ value|default_if_none:"(N/A)" }} 值是None,使用指定值
{{ 列表变量|dictsort:"数字" }} 排序从小到大
{{ 列表变量|dictsortreversed:"数字" }} 排序从大到小
{% if 92|divisibleby:"2" %} 判断是否整除指定数字
{{ string|escape }} 转换为html实体
{{ 21984124|filesizeformat }} 以1024为基数,计算最大值,保留1位小数,增加可读性
{{ list|first }} 返回列表第一个元素
{{ "ik23hr&jqwh"|fix_ampersands }} &转为&
{{ 13.414121241|floatformat }} 保留1位小数,可为负数,几种形式
{{ 13.414121241|floatformat:"2" }} 保留2位小数
{{ 23456 |get_digit:"1" }} 从个位数开始截取指定位置的1个数字
{{ list|join:", " }} 用指定分隔符连接列表
{{ list|length }} 返回列表个数
{% if 列表|length_is:"3" %} 列表个数是否指定数值
{{ "ABCD"|linebreaks }} 用新行用
、
标记包裹
{{ "ABCD"|linebreaksbr }} 用新行用
标记包裹
{{ 变量|linenumbers }} 为变量中每一行加上行号
{{ "abcd"|ljust:"50" }} 把字符串在指定宽度中对左,其它用空格填充
{{ "ABCD"|lower }} 小写
{% for i in "1abc1"|make_list %}ABCDE,{% endfor %} 把字符串或数字的字符个数作为一个列表
{{ "abcdefghijklmnopqrstuvwxyz"|phone2numeric }} 把字符转为可以对应的数字??
{{ 列表或数字|pluralize }} 单词的复数形式,如列表字符串个数大于1,返回s,否则返回空串
{{ 列表或数字|pluralize:"es" }} 指定es
{{ 列表或数字|pluralize:"y,ies" }} 指定ies替换为y
{{ object|pprint }} 显示一个对象的值
{{ 列表|random }} 返回列表的随机一项
{{ string|removetags:"br p div" }} 删除字符串中指定html标记
{{ string|rjust:"50" }} 把字符串在指定宽度中对右,其它用空格填充
{{ 列表|slice:":2" }} 切片
{{ string|slugify }} 字符串中留下减号和下划线,其它符号删除,空格用减号替换
{{ 3|stringformat:"02i" }} 字符串格式,使用Python的字符串格式语法
{{ "EAB
{{ 时间变量|time:"P" }} 日期的时间部分格式
{{ datetime|timesince }} 给定日期到现在过去了多少时间
{{ datetime|timesince:"other_datetime" }} 两日期间过去了多少时间
{{ datetime|timeuntil }} 给定日期到现在过去了多少时间,与上面的区别在于2日期的前后位置。
{{ datetime|timeuntil:"other_datetime" }} 两日期间过去了多少时间
{{ "abdsadf"|title }} 首字母大写
{{ "A B C D E F"|truncatewords:"3" }} 截取指定个数的单词
{{ "111221"|truncatewords_html:"2" }} 截取指定个数的html标记,并补完整
{{ string|upper }} 全部大写
linkage url编码
{{ string|urlize }} 将URLs由纯文本变为可点击的链接。(没有实验成功)
{{ string|urlizetrunc:"30" }} 同上,多个截取字符数。(同样没有实验成功)
{{ "B C D E F"|wordcount }} 单词数
{{ "a b c d e f g h i j k"|wordwrap:"5" }} 每指定数量的字符就插入回车符
{{ boolean|yesno:"Yes,No,Perhaps" }} 对三种值的返回字符串,对应是 非空,空,None
- include 允许在模板中包含其他模板内容
{%include ’nav.html'%}
- 注释
{# 俺是注释 #}
Template有很多,还有常用的dot.js之类的常用前端模板,但是只要是模板目的都相同,就是方便开发。
参考资料:
http://tangram.baidu.com/BaiduTemplate
http://djangobook.py3k.cn/chapter04/