JsRender 点滴

JsRender 渲染模板，比较强大的就是模板竟然支持简单的编程，这给网页的动态生成提供了极大的便利。

JsRender首先需要的是一个模板，其次是数据，用$.templates方法通过JQuery选择器，得到一个编译过的

模板对象（compiled template），例如：

var myTemplate = $.templates("#personTmpl");

之后就可以用数据渲染这个对象得到string类型的html数据了，

var html = myTemplate.render(people);

再通过JQuery的html方法，把生成的数据插入到HTML DOM中，新的页面信息就生成了，渲染结束。

看下面这个模板（来自于官方doc）

<table><tbody id="peopleList"></tbody></table>

<script id="peopleTmpl" type="text/x-jsrender">
  <tr><td>
    <ul>
      {{for people}}
        <li>
          {{:name}}
          {{if nickname}}
            ( {{:nickname}} )
          {{/if}}
        </li>
      {{/for}}
    </ul>
  </td></tr

再看js脚本

var myTemplate = $.templates("#peopleTmpl");

var people = [
    {
      name: "Adriana"
    },
    {
      name: "Robert",
      nickname: "Bob"
    }
  ];

  app = {
    people: people
  };

var html = myTemplate.render(app);

$("#peopleList").html(html);

当render(arg)中传入的参数arg为数组时，JsRender会对for循环中的每个元素进行一次渲染