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

Source: Internet
Author: User

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

    1. 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);

    1. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.