Introduction to the front-end template tool for VISRO applications-jsrender

1. What is Jsrender:

Jsrender is a JavaScript template engine that is simple, intuitive, powerful, extensible, earlier written in jquery, and later reconstructed by the author, and no longer relies on jquery.

Its official website is #jsrender in http://www.jsviews.com/. Good English can refer to the official documents and the listing. In visor, you can define the Jsrender template, and then generate the appropriate SQL and entity class files by designing the ER object and the entity object data. Visor specific applications are not burdensome here. You can experience it yourself.

Http://www.visor.com.cn. The book below belongs to the story

2. Why do I need a template

Here's a jquery example:

var html = '; $.each (data.persons, function (I, item) { html + = "<tr><td>" + item. FirstName + "</td><td><a href= '/person/edit/" + Item. PersonID + "' >Edit</a> | <a href= '/person/details/ ' + Item. PersonID + "' >Details</a> | <a href= '/person/delete/ ' + Item. PersonID + ">Delete</a></td></tr>"; }); $ (' #XXX '). Append (HTML);

The obvious downside to writing this is that it's too low visibility to maintain .

Let's take a look at Jsrender 's example.

Templates <script id="peopletemplate" type="text/x-jsrender " > <div> {for address} } {{if Show}} {{ : A}}</br> {{else}} {{: b}}</br> { { /if}} {{ /For}} </div></script> Container <div id="peoplelist"></div> Data <script>varpeople=[ { "name":"Jose", "Address":[ {"Show":true,"a":"1","b":"1b"}, {"Show",false,"a":"2","b":"2b"}, {"Show",false,"a":"3","b":"3b"} ] } ] Render Data Insert into Container var peopletemplate=$.templates ("#peopleTemplate"); var html=Peopletemplate.render (people); $ ("#peopleList"). HTML (HTML) ;

This kind of code looks much more clearly structured.

3.JsRender three elements

As can be seen from the above Jsrender example, Jsrender needs three elements, namely template (Templete), container (Container), data. The main behavior is to render the data into the template (render data), and then insert the rendered result into the container (insert into Container). 

4.JsRender Rendering Templates

In Jsrender , the template is rendered by invoking the method render () . There are 3 ways of doing this:

1. if a template object already exists , you can use Template.render (...) .

As in the above example

2. If you already have a template registered by name, named ("Persontmpl"), you can use $.render.persontmpl (...). called .

$.templates ("persontmpl""#personTemplate"); var html = $.render.persontmpl (person);

3. If the Template script block, And the script block uses selector "#myTmpl"   Persontemplate "). Render (...) call

<script id="persontemplate" type="text/x-jsrender"> ... </script>var html = $ ("#personTemplate"). Render (person);

the 1th and 2nd methods are the pre-render compilation :

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

the 3rd way is to not compile direct rendering:

var html = $ ("#XXXXX"). Render (data); XXX represents a script tag, which is <script id= "xxx" type= "Text/x-jsrender" >.......</script>

To summarize, you can see:

1, no direct rendering of the compiler can not be used for the rendering of strings, before rendering the way strings and script tags can be compiled.

2, the template name of the way to compile can compile multiple templates at the same time, but the way to get template objects compiled only one template

5. JsRender templates (template)

of Basic JsRender Tags: The JsRender template consists primarily of HTML tags and JsRender tags (like the {{: XXX}}} above). All Jsrender tags are wrapped in two curly braces, which can be either a parameter or an expression (e.g. {{: #index}} and {{: #index +1}}). Here's a look at some basic jsrender tags .

describe	Example child	Lose out
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>

5.1 JsRender Data traversal:

{{for XXX}}

<li>{{:xxx.property}}</li>

{{/for}}

If you want to get XXX itself, you can write this:

{{for xxx yyy}}

<li>{{: #data}}</li>

{{/for}}

The above example illustrates two points, 1, for not only can traverse a set of data, he can even traverse two sets of data at the same time (powerful bar ... ). 2, the above #data represents xxx and yyy native. Imagine how xxx and yyy all represent an array of basic elements (strings, integers, and so on, arbitrary crosses), so is this a good way to complete the traversal? Said #data, have to mention #index, #data and #index are built-in jsrender keywords (#data the data itself, #index default value is 0) . Let's look at one more example :                

5.2JsRender conditions

{{if Fullprice}}

HTML markup

{{Else Halfprice}}

HTML markup

{{Else}}

HTML markup

{{/if}}

1. If....else....else represents the If ElseIf else, where else represents the ElseIf.

2. The fullprice conditional expression in {{if fullprice}} indicates that Fullprice is not empty. In fact, you can also have more understanding of the conditional expression can be applied here, as follows:

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

3, in the conditional expression can also be compared with some properties, such as {{if xxx.length >}} and so on

5.3 Template Nesting

<script type= "Text/x-jsrender" id= "Studenttemplate" > {{for #data}} <ul> {{for language tmpl= ' #studentLanguageTemplate '/}} </ul> {{/for}} </script> <script type= "Text/x-jsrender" id= "Studentlanguagetemplate" > <li> {: #parent. Parent.data.name}} is learning {{:title}}</li> </script> Render $ ("#studentList"). HTML ($ ("#studentTemplate"). Render (Studnets));

The above is a template nesting for Jsrender, only the Tmpl property of {{for}} needs to be set . 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}}                  <ul>         {{for Language tmpl= "Studentlanguagetemplate"/}}         </ul>     {{/for}} </script>   <script type= " Text/x-jsrender "id=" studentlanguagetemplate "     <li> {: # Parent.parent.data.name}} is learning {{: Title}}</li> </script> //render $.templates ("Studentlanguagetemplate", "#studentLanguageTemplate"); $ ("#studentList"). HTML ($ ("#studentTemplate"). Render (Studnets));

The above Templ no longer "#XXX" point to a script tag, but "XXX" points to a tagged script tag .

Introduction to the front-end template tool for VISRO applications-jsrender