jsRender的使用

先贴一下API地址：http://www.jsviews.com/#jsrapi

再贴一下源码地址：https://github.com/BorisMoore/jsrender

在线演示地址：http://borismoore.github.io/jsviews/demos/index.html

一、简单使用

1、先引用jquery和jsrender.js

2、要渲染的模板写成这样：

<script id="movieTemplate" type="text/x-jsrender"><div>{{:#index+1}}: <b>{{>name}}</b> ({{>releaseYear}})</div></script>

3、在页面中被渲染的目标地址：

<div id="movieList"></div>

4、获取数据（这里先写死了）：

var movies = [{ name: "The Red Violin", releaseYear: "1998" },{ name: "Eyes Wide Shut", releaseYear: "1999" },{ name: "The Inheritance", releaseYear: "1976" }];

5、渲染：

$( "#movieList" ).html($( "#movieTemplate" ).render( movies ));

效果：

二、converters的使用

conveters是处理和格式化值类型的方法。

比如：

{{html:movie.description}} - html编码{{url:getTheFilePath()}} - url编码{{daymonth:invoice.date}} - 使用自定义的formatter 

自定义的formatter使用方法如下：

1、先注册converters getRsbPointStr:

    $.views.converters("getRsbPointStr", function (responsiblePointList) {        var rspsbPointName = "";        for (var index in responsiblePointList) {            rspsbPointName += responsiblePointList[index].PointName;            rspsbPointName += ",";        }        if (rspsbPointName.length > 1) {            rspsbPointName = rspsbPointName.substr(0, rspsbPointName.length - 1);        }        return rspsbPointName;    });

2、页面中使用

<td>{{getRsbPointStr:responsiblePointList}}</td>

三、条件判断

条件判断写法如下：

{{if nickname}}  Nickname: {{:nickname}}{{else}} No nickname...{{/if}}

当然if后面是可以跟表达式的，比如{{if sore>80}}

例：

<h4>{{:title}}</h4>{{if members && members.length}}  <ul>    {{for members}}      <li>{{:name}}</li>    {{/for}}  </ul>{{else standby && standby.length}}  Standby only:  <ul>    {{for standby}}      <li>{{:name}}</li>    {{/for}}  </ul>{{else}}  No members!{{/if}}

渲染：

var data = [  {    "title": "The A team",    "members": [      {        "name": "Pete"      },      {        "name": "Heidi"      }    ],    "standby": [      {        "name": "Xavier"      }    ]  },  {    "title": "The B team",    "members": [],    "standby": [      {        "name": "Robert"      },      {        "name": "Adriana"      }    ]  },  {    "title": "The C team",    "standby": []  }];var template = $.templates("#theTmpl");var htmlOutput = template.render(data);

结果：

四、$.views.tags()

$.views.tags可以自定义标签，指定自定义标签的渲染规则。它可以给一段固定格式的html块起个名称，然后通过这个名称直接调用

使用方法：

{{mytag ...}} ... {{/mytag}}

比如：

1、先注册一个名称为：boldp 的标签，作用是将内容用<b>和<p>标签包起来

function renderBoldP(value) {   return "<p><b>" + value + "</b></p>";}$.views.tags("boldp", renderBoldP);

2、页面中直接使用自定义标签名称：{{boldp .. ./}}或者{{boldp}} ... {{/boldp}}

<div id="team"></div><script id="teamTemplate" type="text/x-jsrender">  This is the title:{{boldp title /}}</script>

3、加载数据渲染

var team = {  title: "The A Team"};var html = $("#teamTemplate").render(team);$("#team").html(html);

4、我们来看结果：

5、大功告成？NO，上面的方法看似简单，但是如果想在使用的时候在自定义标签里添加其它html内容，上面展示的方法就不适用了。

比如我想要我的自定义标签这样使用：

  {{boldp}}    我想在这里可以自由输入一些标签:<br/>    <em>{{:title}}</em>  {{/boldp}}

注意观察，这次使用的时候自定义标签内部多了一些html。如何解决这种情况呢？jsrender提供了 this.tagCtx.render(val)方法。当然还有其它方法（this.tagCtx.args, this.tagCtx.props, this.tagCtx.view.data等）以后再研究。简单理解，this.tagCtx.render(val)就是只渲染变量部分。

用法，只需修改renderBoldP函数，不是简单的加：

function renderBoldP(val) {   return "<p><b>" + this.tagCtx.render(val) + "</b></p>";}

再来看效果：

6、更高级的用法，使用 this.tagCtx.props 可以在渲染时指定参数，然后在你的tag渲染函数中处理。

比如我在渲染自定义标签range时，添加了start和end参数：

    {{range members start=1 end=2}}       <li>        {{:name}}      </li>    {{/range}}

注册tag的方法可以直接使用：this.tagCtx.props.start和this.tagCtx.props.end访问到这两个值。

比如下面的注册，只渲染 menbers数组下标为1到2之间的数据：

$.views.tags("range", function(array) {  var ret = "",    start = this.tagCtx.props.start,    end = this.tagCtx.props.end;  for (var i = start; i <= end; i++) {    // Render tag content, for this data item    ret += this.tagCtx.render(array[i]);  }  return ret;});

如果menbers数组是这样：

  members: [    {name: "Robert"},    {name: "Sarah"},    {name: "Xavier"},    {name: "Adriana"}  ]

那将只渲染 Sarah和Xavier

7、上面都是使用渲染函数，下面看一下直接使用template的方法：

$.views.tags("boldp", {  template: "<p><b>{{:~tag.tagCtx.args[0]}}</b></p>"});

直接调用 tag.tagCtx.args参数，无需再自定义函数去注册。

仔细对比，注册tags的第二个参数，一个是函数一个是数组！

$.views.tags("boldp", {template: "..."});$.views.tags("boldp", function);

五、$.views.helpers()

可以定义一些方法，在渲染的时候处理

1、注册方法 toUpperCase：

$.views.helpers({toUpperCase: function(val) {return val.toUpperCase();}});

2、调用：

<a>{{>~toUpperCase(title)}}</a>

3、贴出全部代码：

<!DOCTYPE html><html><head><script src="http://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script><script src="../../jsrender.js" type="text/javascript"></script></head><body><h3>Helper demo</h3><script id="aTemplate" type="text/x-jsrender"><a>{{>~toUpperCase(title)}}</a></script><div id="content"></div><script type="text/javascript">$.views.helpers({toUpperCase: function(val) {return val.toUpperCase();}});var data = {title: "test1",};$( "#content" ).html($( "#aTemplate" ).render( data ));</script></body></html>

六、for循环

{{for pathOrExpr}}...{{/for}}

比如，数据data中addrss字段还是列表，需要循环渲染

var data = [  {    "name": "Pete",    "address": {      "city": "Seattle"    }  },  {    "name": "Heidi",    "address": {      "city": "Sidney"    }  }];

就可以这样使用：

{{:name}} lives in {{for address}}  <b>{{>city}}</b>{{/for}}

for标签内部直接写字段名称即可

七、其它介绍

1、jsRender的模板标签使用Mustache style（汗，英语不好伤不起）风格。也可以自行定义分隔符，比如： <%...%>，使用$.views.settings.delimiters("<%", "%>")即可。

2、三种内置标签：

{{: pathOrExpr}}             (value) 值类型{{> pathOrExpr}}             (HTML-encoded value) html编码后的值{{* mycode}}                 (using code) 代码

这里在回顾一下自定义标签，比如：{{mytag /}}自定义标签是闭合的，还是稍有不同。

3、#data可以访问整个数据

比如六中的例子，{{#data}}即可拿到当前要渲染的一条data的值。比如，渲染到第一条，就得到：

  {    "name": "Pete",    "address": {      "city": "Seattle"    }  },

举个例子：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <script src="http://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>    <script src="jsrender.js" type="text/javascript"></script></head><body><h3>Helper demo</h3><script id="aTemplate" type="text/x-jsrender">        <a>{{>name}}</a>        <br/>        {{for score}}          <span>数学</span> <span>{{>math}}</span>          <span>语文</span> <span>{{>chinese}}</span>        {{/for}}        <span>平均分</span><span>{{>~averageScore(#data)}}</span>        <br/>        <br/></script><div id="content"></div><script type="text/javascript">    $.views.helpers({        averageScore: function(val) {                var total = 0.0;                var counter = 0;                for(var a in val.score){                  total += parseFloat(val.score[a]);                  counter++;                }                return total/counter;            }    });    var data = [{            "name": "zhangsan",            "score":{              "math":"95",              "chinese":"92",            }        },        {            "name": "lisi",            "score":{              "math":"72",              "chinese":"98",            }        }];    $( "#content" ).html(        $( "#aTemplate" ).render( data )    );</script></body></html>

结果：