Home

使用

引用JS文件：

<script src="fxtpl.min.js"></script>

JS下载>>

编写HTML：

<div id="myTemplate">
	<p>Hello, <!--[$name]--></p>
</div>

编写JS：

var data = {
	name: 'Fxtpl前端模板引擎'
};
Fxtpl.render('myTemplate', data);

查看演示>>

语法

1、输出变量/表达式

Fxtpl的变量和Smarty模板类似，模板域变量以$开头。同时，为了最大兼容浏览器的预渲染，默认左右分隔符为<--[和]-->

>> 直接输出模板变量
<div>歌手： <!--[$starName]--></div>

>> 输出变量的子项
<div>用户ID： <!--[$userInfo.userId]--></div>

>> 应用模板辅助方法（变量调节器）“escape”转义字符串
<div>您的留言： <!--[$notes|escape]--></div>

>> 应用JS原生“||”语法，设置“$votes”的默认值为“暂无”
<div>您的票数：<!--[$votes||'暂无']--></div>

>> 应用JS原生字符串方法replace
<div>时间：<!--[$time.replace('/', '-')]--></div>

>> 应用JS三元运算，输出“成功”或“失败”
<div>晋级：<!--[$status == 1? '成功': '失败']--></div>

>> 应用外部jQuery的$.trim方法
<div>评论：<!--[$.trim($comment)]--></div>

查看演示>>

2、if、if...else、if...elseif...，可多重嵌套

>> if
<!--[if $status == '1']-->
	<div>直播中...</div>
<!--[/if]-->

>> if...else
<!--[if $status == '1']-->
	<div>直播中...</div>
<!--[else]-->
	<div>休息中...</div>
<!--[/if]-->

>> if...elseif
<!--[if $status == '1']-->
	<div>直播中...</div>
<!--[elseif $status == '2']-->
	<div>录像中...</div>
<!--[/if]-->

查看演示>>

3、each...[index]、each...as...[index]

>> each遍历，默认带两个参数：$index(索引)、$item(值)，同时内部this指针指向$item
<ul>
<!--[each $userList]-->
    <li>索引：<!--[$index]-->，名称：<!--[$item]--></li>
<!--[/each]-->
</ul>

>> each...as...遍历，自定义$index、$item参数，可省略“$”前缀（为保持模板变量一致性，不建议省略）
<ul>
<!--[each $userList as $name $i]-->
    <li>索引：<!--[$i]-->，名称：<!--[$name]--></li>
<!--[/each]-->
</ul>

查看演示>>

4、include id, [data]（引入子模板）

>> 引入id为“msgContent”的子模板，并用data渲染（可省）
<div id="box">
	<p>您好，收到新消息： </p>
	<!--[include 'msgContent', data]-->
</div>

>> 子模板内容
<script id="msgContent" type="text/fxtpl">
	<p>时间：<!--[$date]--></p>
	<p>发送者：<!--[$sender]--></p>
	<p>内容：<!--[$content]--></p>
</script>

查看演示>>

(注：后续的 include 可能会提供类似 <!--[include '/common/header.html']--> 同步/异步引入外部文件的支持，欢迎在Issues提出建议)