jSmart: Client Side Smarty Template

客户端的模版应用也逐渐变得流行起来，有各种各样的模版引擎出现。

jSmart是其中一种。是Smarty的JavaScript移植。

利用jSmarty实现缓存页面的个性化

对页面进行缓存是提高访问速度的很有效的方法。一个会碰到的问题是缓存页面包含部分针对不同用户的个性化内容时该如何处理。

下面的例子要解决的问题是针对登录用户和未登录用户显示不同的链接。

<script type="text/x-jsmarty-tmpl">
{if $cookie.login}
<span style="position:absolute;right:9px;top:0;line-height:2.0;color: white; ">
   <!--a style="color:inherit" rel="nofollow" href="user/setting">Setting</a-->
{$store.login_name|default:'Guest'}
 | <a style="color:inherit" rel="nofollow" href="user/logout">Log Out</a>
</span>
{else}
<span style="position:absolute;right:9px;top:0;line-height:2.0;color: white; ">
   <a style="color:inherit" rel="nofollow" href="user/signup">Sign Up</a>
 | <a style="color:inherit" rel="nofollow" href="user/login">Log In</a>
</span>
{/if}
</script>

与之配套的JavaScript代码简单示意如下：

$('script[type="text/x-jsmarty-tmpl"]').each(function(){
   var tpl = new jSmart(this.innerHTML);
   var data = {cookie:$.cookie(), store:window.localStorage};
   var result = tpl.fetch( data );
   $(this).replaceWith(result);
});