1. 后端渲染的局限性

有些时候，我们总会做一些瀑布流的界面，如下： 

在不断的下拉过程中，会动态向其中添加重复的DOM结构，而且，我们也希望同步刷新页面的时候，DOM是直接在服务端渲染好的，而并不是在客户端再发一次请求去拼装。

    那么问题就来了，如果我们需要服务端渲染第一屏的数据，客户端在下拉过程中，在客户端拼装模板去渲染。那么我们的模板怎么写，如果后端使用的是NODE的同学，可以无须担心，但是如果后端是php+smarty的话，在服务端写的模板，在客户端就没法使用了。

    于是，smartyMonkey应运而生，smartyMonkey的

    我们来看一下，smartyMonkey如何帮助我们解决这个服务端smarty客户端不能用的问题。

    smartyMonkey使用js写的，可以解析部分smarty语句的库。

    ① 先说一下我们没有任何编译工具的情况下，最简单的使用例子：

     我们的建立三个文件：

     1: item.tpl，里面存放着单条新闻的DOM结构，如下图所示：

     2: news.tpl， 里面存放着整张页面的代码。

     3：index.js，里面存放着拼装模板的代码。

      我们首先要写item.tpl，在里面，是每条新闻的DOM结构，如：

    
{%$title%}
    

      我们在主模板中，引入item.tpl，同步出新闻

       引用的方式，在news.tpl中引用模板，并赋值到一个变量中：

<&include file="./item.html" assign="tplStr"&>

        在具体引用出，直接调用：

<&include file="string:$tplStr" inline&>

     并且，在页面中，把模板传送到前端：

<&strip&><&$tplStr&><&/strip&>

    在index.js中，我们直接读取textarea中的模板数据，

于是，我们就拼合成了要填入页面的模板字符串。这样我们就达到了，同一个模板(item.tpl)，服务端与客户端共用的目的。

如果使用的编译工具的同学，还可以这样用， 编译的时候，将item.tpl内联到news.tpl中去。

news.tpl中(FIS方式)：

在index.js中：

    这样写起来，更加容易了。

这就是前端渲染smarty模板解决方案---SmartyMonkey