JSRender之渲染模板

在JsRender中，是通过调用方法render()来渲染模板的。

 

JsRender中，有三种方式调用render()方法来渲染模板。

1） 如果已经存在一个template的对象，则可以使用template.render(...)

Html代码  

1. <table><tbody id="person"></tbody></table>  
2.   
3. <script id="personTmpl" type="text/x-jsrender">  
4.   <tr>  
5.     <td>  
6.       {{:name}}  
7.     </td>  
8.   </tr>  
9. </script>  

 

Js代码  

1. var myTmpl = $.templates("#personTmpl");  
2.   
3. var person = {  
4.     name: "Adriana"  
5.   };  
6.   
7. var html = myTmpl.render(person);  
8.   
9. $("#person").html(html);  

 

2)   如果已经有一个通过名字注册的template，名字为("myTmpl"),则可以使用$.render.myTmpl(...)调用。

Html代码  

1. <table><tbody id="person"></tbody></table>  
2.   
3. <script id="personTemplate" type="text/x-jsrender">  
4.   <tr>  
5.     <td>  
6.       {{:name}}  
7.     </td>  
8.   </tr>  
9. </script>  

 

Js代码  

1. $.templates("personTmpl", "#personTemplate");  
2.   
3. var person = {  
4.     name: "Adriana"  
5.   };  
6.   
7. var html = $.render.personTmpl(person);  
8.   
9. $("#person").html(html);  

 

3）如果该template是在一个script脚本块中定义的，并且该脚本块使用selector“#myTmpl"，则同样可以使用$("#myTmpl").render(...)调用。

Html代码  

1. <table><tbody id="person"></tbody></table>  
2.   
3. <script id="personTemplate" type="text/x-jsrender">  
4.   <tr>  
5.     <td>  
6.       {{:name}}  
7.     </td>  
8.   </tr>  
9. </script>  

 

Js代码  

1. var person = {  
2.     name: "Adriana"  
3.   };  
4.   
5. var html = $("#personTemplate").render(person);  
6.   
7. $("#person").html(html);