jquery Template-----JsRender

Re-typesetting and 88

Let's look at the simple example:

//Templates<script type= "Text/x-jsrender" id= "Personlisttemplate" >    {{ forPersons}} <tr> <td>{{:FirstName}}</td> <td> <a href= "/person/edit/{{                 :P Ersonid}} ">Edit</a> |                 <a href= "/person/details/{{:P Ersonid}" >Details</a> | <a href= "/person/delete/{{:P Ersonid}}" >Delete</a> </td> </tr> {{/FOR}}&LT;/SC Ript>//Render DatavarHTML = $ ("#personListTemplate"). render (data); //data data not tested //Insert into Container$ ("#XXX"). Append (HTML);

Jsrender three elements and behavior

As you can see from the code above, Jsrender requires three elements: template, container (Container: Simple ... Data: Data can make various JS objects: Array, object, and so on. The main behavior is: render the template, insert the rendered result into the container (this is too simple). Next, the rendering template first ...

Jsrender Rendering Templates

　1, no need to compile direct rendering:

var // XXX represents a script tag, which is <script id= "xxx" type= "Text/x-jsrender" >.......</script>

2. Compile before rendering:

/ *A, Get template objects in the way compiled * /varXxxtemplate = $.templates ("#xxxTemplate");//can be either a string or a script tag, B is a stringvarHTML =Xxxtemplate.render (data);/*B, specify the template name in the way compiled*/$.templates (' xxx ', ' <b>{{:name}}</b> '); $.templates ({' yyy ', ' <b>{{:name}}</b> ',' zzz ', ' <b>{{:name}}</b> '});varHTML = $.render.xxx (data);//Note that the second method can render multiple templates at the same time, but the first method is not

Jsrender Templates (Template)

　Basic Jsrender Tags

Describe	Example	Output
Value of parameter FirstName (not HTML encoded)	{{: FirstName}}	Madelyn
The value of the property--releaseyear of the parameter movie (not HTML-encoded)	{{: Movie.releaseyear}}	1987
Comparisons (expressions, not HTML-encoded)	{{: Movie.releaseyear < 2000}}	True
HTML-encoded values (more secure, but with a bit of memory)	{{>movie.name}}	Star wars:episode VI: <span style= ' color:purple;font-style:italic; >return of the Jedi</span>
HTML-encoded values	{{Html:movie.name}}	Star wars:episode VI: <span style= ' color:purple;font-style:italic; >return of the Jedi</span>

Jsrender Data Traversal

//Template{{ for#data}}         {{ forLanguage}} <li> {: #parent. Parent.data.name}} isLearning {{:title}}</li>        {{/ for}}        </ul>{{/ for}}//Data varStudnets = [        {            "name":"Mingjun Tang",            "language": [{"title":"中文版"},{"title":"Franch"}]        },        {            "name":"Ming Tang",            "language": [{"title":"中文版"}]        }];

#data acts as a students while traversing, while #parent.parent.data.xxx can be used to iterate upward. Note that the data here is not a property amount in student, because #parent returns an Jsrender object after an upward iteration, only #parent. Data returns the array contents. #parent在jsrender叫路径访问, but I think it's better to call it an upward iteration.

Jsrender conditions :

{{if  fullprice}}    html markup{{else  Halfprice}}    html markup{{  else}}    html markup{{/if}}

An expression	Example	Comments
||	{: a | | b}}	Or
&&	{{: a && B}}	And
!	{{:!a}}	Non -
<= and >= and < >	{{: a <= B}}	Comparison
= = = and!==	{{: a = = = b}}	equal to and not equal to

jsrender Template Nesting :

<script type="Text/x-jsrender"Id="studenttemplate">    {{ for#data}}         {{ forLanguage tmpl="#studentLanguageTemplate"/}}        </ul>    {{/ for}}</script><script type="Text/x-jsrender"Id="studentlanguagetemplate"> <li> {: #parent. Parent.data.name}} isLearning {{:title}}</li></script>//Render$("#studentList"). HTML ($ ("#studentTemplate"). Render (Studnets));

This avoids infinite nesting and only needs to set the Tmpl property of {{for}}. At this point, Tmpl is a script tag. If Studentlanguagetemplate has been compiled by $.templates (), you can also write this:

<script type="Text/x-jsrender"Id="studenttemplate">    {{ for#data}}         {{ forLanguage tmpl="studentlanguagetemplate"/}}        </ul>    {{/ for}}</script><script type="Text/x-jsrender"Id="studentlanguagetemplate"> <li> {: #parent. Parent.data.name}} isLearning {{:title}}</li></script>//Render$.templates ("studentlanguagetemplate","#studentLanguageTemplate");$("#studentList"). HTML ($ ("#studentTemplate"). Render (Studnets));

jquery Template-----JsRender