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>

结果：