jsrender的使用总结

1.基本结构

 let localData={         "name":"<strong>gt</strong>"     }; let markup = `        <p>{{:name}}</p>        <p>{{>name}}</p> `; let template = $.templates(markup); let compiledHtml = template.render(localData);

结果：

gt
<strong>gt</strong>

原因：

{{: value}} 值类型
{{> value}} html编码后的值

2.if-else

　语法：{{if condition}} … {else condition} … {{else}}… {{/if}}

　[  {title: "The A team", members: [...], standby: [...]},  {title: "The B team", members: [], standby: [...]},  {title: "The C team", standby: []}  ]{{if members && members.length}}  ...{{else standby && standby.length}}  Standby only:  ...{{else}}  No members!{{/if}}

3.for

　语法：{{for}}…{{for 当前上下文}} … {{/for}} … {{/for}}

[{ name: "tom", hobbies: ["篮球", "足球"] },{ name: "jack", hobbies: ["篮球", "橄榄球"] },{ name: "lucy", hobbies: ["游泳", "羽毛球"] }]{{for}}    <li>        name:{{:name}}        <ul>            {{for hobbies}}              <li>{{:#getIndex() + 1}}:{{:#data}}</li>            {{/for}}        </ul>    </li>{{/for}} 

　#getIndex()获取当前数组的index索引,从0开始计算。（#index也可以获取索引，但有时候会出错,所以避免使用#index，除非你的应用足够简单。）
　#data表示for循环下当前数据。（相当于this）

{{for}}    <li>        name:{{:name}}        <ul>            {{for hobbies  ~parentIndex=#index ~parentName=name }}              <li>{{:#getIndex() + 1}}:{{:#data}}</li>            {{/for}}        </ul>    </li>{{/for}} 

有时候我们需要在for循环内部for循环中获取到父级数据，通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据。

用法：在for循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔。
　

4.props

localData={    'order':{            'one': 1,            'second': 2        }}{{props order}}   <p>and the {{:key}} price is {{:prop}}</p>{{/props}}

当我们遍历对象需要使用到对象的key值时，使用props可以获取到key/value值，而且也可以在for循环中进行对象的遍历,在数据循环中获取可以使用#data获取到当前的对象,使用prop指代key值对应的value值。

5.转换器 converter

把value转换成所需要的格式

语法：
　　　html : {{“转化器名称”:参数}}
　　　
　　　 js ： $.views.converters({“转换器名称”:function(参数){…}})

 <h3>{{upper:name}}</h3> $.views.converters({        upper: function(value){            return value.toUpperCase();        }    })

6.辅助函数 helpers

对传入的参数value做处理

语法：
　　　html : {{~“函数名称”(附加参数)}}
　　　
　　　 js ： $.views.helpers({“辅助函数名称”:function(参数){…}})

<h3>{{:~test(firstName, lastName)}}</h3>let localData= {        firstName: 'guo',        lastName: 'tao',        age: 18    };$.views.helpers({        test: function(first, last){            return 'Hello ' + first+ ' ' + last;        }   })

7.　 自定义标签 tags

语法：
　　　html : {{“标签名称” 标签参数 附加参数}}
　　　
　　　 js ： $.views.tags({“标签名称”:function(参数){this.tagCtx.props.prefix附加参数}}) //prefix附加参数是你传的参数名称