PHP的Smarty模板，使HTML语言从php中独立出来，很多项目中都是用Smarty模板来前端绑定的。著名的商城开源程序Ecshop的模板就是在smarty模板基础上稍加改动，删除了很多多余不用的东西而改编完成的，所以你Ecshop模板和smarty模板大同小异。但是smarty模板的使用，必须在php中指定。关于php smarty模板的更多知识，后面会陆续补充！
回归正题，jsmart和smarty模板最大的区别就是jsmart不用指定，只要有数据，随时都可以用！效果很强大！任何一个html页面，只要引入jsmart ，用ajax调用后端接口，都可以轻松绑定！
今天主要介绍一下jsmart的简单用法和语法！
首先下载jsmart,http://www.haorooms.com/uploads/js/smart-2.10.min.rar
你也可以jsmart官网下载：https://code.google.com/p/jsmart/downloads/detail?name=smart-2.10.min.js&can=2&q=
引用方法，头部引用就可以：
<script type="text/javascript" src="smart-2.10.min.js"></script>调用方法是通过如下来的
var tpl = new jSmart(document.getElementById('test_tpl').innerHTML);
var res = tpl.fetch(data);
document.write( res );看下他的官方例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jSmart example</title>
<script type="text/javascript" src="smart-2.9.min.js"></script>
</head>
<body>
<script id="test_tpl" type="text/x-jsmart-tmpl">
<h1>{$greeting}</h1>
{foreach $books as $i => $book}
<div style="background-color: {cycle values="cyan,yellow"};">
[{$i+1}] {$book.title|upper} by {$book.author}
{if $book.price}
Price: <span style="color:red">${$book.price}</span>
{/if}
</div>
{foreachelse}
No books
{/foreach}
Total: {$book@total}
</script>
<script type="text/javascript">
var data = {
greeting: 'Hi, there are some JScript books you may find interesting:',
books: [
{
title : 'JavaScript: The Definitive Guide',
author : 'David Flanagan',
price : '31.18'
},
{
title : 'Murach JavaScript and DOM Scripting',
author : 'Ray Harris'
},
{
title : 'Head First JavaScript',
author : 'Michael Morrison',
price : '29.54'
}
]
};
var tpl = new jSmart(document.getElementById('test_tpl').innerHTML);
var res = tpl.fetch(data);
document.write( res );
</script>
</body>
</html>是不是很简单呢？
我们用ajax调用也很简单，ajax返回的时候，同样运用这三句话
var tpl = new jSmart(document.getElementById('模板ID').innerHTML);
var res = tpl.fetch(d);
$("#页面显示ID").html(res); 下面再来总结一下jsmart的语法：
首先来看if语句，if语句
{if},{elseif},{else}
{if $foo != 'bar'}
bar
{elseif $foo == 'abc'}
buh
{else}
smth else
{/if}再看foreach语句
数据如下：
{$colors = [black=>'#000', blue=>'#00F', green=>'#0F0', red=>'#F00', white=>'#FFF']}用法如下：
{foreach $colors as $name=>$color}
{if $color@first}
<div id=colors>
{/if}
<span style="color:{$color}">[{$color@index}] [{$color@iteration}] {$name}</span>
{if $color@last}
</div>
{/if}
{foreachelse}
'colors' array is empty
{/foreach}
{if $color@show}
num of colors: {$color@total}
{/if}显示如下：
<div id=colors>
<span style="color:#000">[0][1] black</span>
<span style="color:#00F">[1][2] blue</span>
<span style="color:#0F0">[2][3] green</span>
<span style="color:#F00">[3][4] red</span>
<span style="color:#FFF">[4][5] white</span>
</div>
num of colors: 5还可以使用javascript
用法如下：
{$foo = 'bar'}
{javascript}
if (foo == 'bar')
{
foo = 'buh';
$this.newVar = 'new';
}
{/javascript}
foo: {$foo}
newVar: {$newVar}输出：
foo: buh
newVar: new{for} {forelse}用法，{for} {forelse}主要用于简单的循环，有如下用法：
{for $var=$start to $end}
{for $var=$start to $end step $step}例子如下：
{for $i=1 to 5}
{if $i == 3}
{continue}
{/if}
{$i}
{/for}
{for $i=-5 to -1}
{$i}
{/for}
{$num=10}
{for $i=$num to 1 step -2}
{$i}
{/for}
{$ar = ['a','b','c','d']}
{for $i=0 to $ar|count-1 max=3}
{$ar[$i]}
{/for}
{$empty = []}
{for $i=0 to $empty|count-1}
{$ar[$i]}
{forelse}
array is empty
{/for}输出：
1 2 4 5
-5 -4 -3 -2 -1
10 8 6 4 2
a b c
array is empty以上几个是比较常用的，更多API请看 https://code.google.com/p/jsmart/w/list