前台绑定jsmart是一种不错的选择。之前在项目中经常用到。最近涉足部分后端领域,jsmart用的相对少了一些,主要是因为他要引用一个文件,还要写模板,在简单的项目中,就直接用js绑定了,只有在非常复杂的前端绑定中才使用。
现在对其整理一下,以免后面忘记:
首先要引入jsmart文件
<script src="js/jsmart.js" type="text/javascript"></script>
其次,用ajax等调用后端接口,返回json数据,在返回数据中。。。如下:
js:
$.ajax({
url:"",
datatype:"json",
type:"get",
success:function(data,status){
var tpl = new jSmart(document.getElementById('myrecord').innerHTML);
var res = tpl.fetch(data);
$("#recordlist").html(res);
}
})
模板语法:
<script id="myrecord" type="text/x-jsmart-tmpl">
//if语句:
{if ($result.accountstate == 1)}
<a href="javascript:setaccountstate(0);">我要下班</a>
{else}
<a href="javascript:setaccountstate(1);">我要上班</a>
{/if}
//循环语句:
{foreach $replies as $i=>$reply}
{/foreach}
//for语句
{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}
</script>
html
<div class="ask_detail" id="recordlist">
<img src="/images/waiting.gif" />
</div>