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附加参数是你传的参数名称