Next-generation jquery template-----JsRender

The Jsrender is mentioned in ASP. Pagedlist page (ii) Pagedlist+ajax+jsrender. Jsredner and Jsviews (Jsviews is further encapsulated on jsrender basis) is called next-generation jquery template, official address: Https://github.com/BorisMoore/jsrender;https ://github.com/borismoore/jsviews. Juqrey template is a JavaScript engine (copy, this thing is too advanced), his most direct role is: 1, code reuse, reduce the amount of code, (it seems easier to write) 2, discard cumbersome string stitching, improve code visibility, simplify maintenance.

Why do I need a template

In short, I have written countless such pain code:
Copy Code

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

Copy Code

If this is still not obvious, see ASP. NET MVC leverages the fourth part of Pagedlist (ii) Pagedlist+ajax+jsrender, and the obvious downside is that such code visibility is too low to be maintainable. Maybe you'll see your code in a few months, and you'll have to spend half an hour or more to get to the code's display structure. Let's take a look at a jsrender example:
Copy Code

Templates
<script type= "Text/x-jsrender" id= "Personlisttemplate" >
{{for Persons}}
<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}}
</script>
Render Data
var html = $ ("#personListTemplate"). Render (data);
Insert into Container
$ ("#XXX"). Append (HTML);

Copy Code

The structure of the code is clearly visible, but the code looks more and more. First of all, this is the illusion, because the east here is strictly for the line. Second, this saves the item, each character complex character, seemingly easier to write.

Jsrender and jquery Template

Since Jsrender is the next generation of jquery templates, who is the previous generation template? Jquery Template. The features of the jquery template here are not nonsense, say the gap between Jsredner and jquery template:

1, Jsrender rendering very fast, the online said is "as fast as the fastest" (of course I do not know how fast he is). For simple template rendering, the Jsrender can be rendered 20 times times faster than JS template.

2. Jsrender does not have any dependencies on Dom and jquery (note: Do not rely on not to say not to use ...) ）。 The jquery template must be tagged with $.template (name, ' XXX ') and then rendered. Jsredner, he can even render strings directly.

3, Jsrender and jquery template compared to jsrender only need less code, 2 is an example.

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

2. Compile before rendering:
Copy Code

/*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

Copy Code

To summarize, you can see that: 1, no direct rendering of the compiler cannot be used for the rendering of strings; the way strings and script tags are compiled before rendering. 2, the template name of the way to compile can compile multiple templates at the same time, but the way to get the template object compilation can only compile a template.

Jsrender Templates (Template)

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, and the middle can be either a parameter or an expression (e.g. {{: #index}} and {{: #index +1}}), and take a look at some basic jsrender tags.
Description Example Output
Value of parameter FirstName (not HTML encoded) {{: FirstName}} Madelyn
Parameter Movie property--releaseyear value (not HTML encoded) {{: Movie.releaseyear}} 1987
Comparison (expression, not HTML-encoded) {{: Movie.releaseyear < +}} 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 value {{Html:movie.name}} Star wars:episode VI: <span style= ' color:purple;font-style:italic; ' >return of the Jedi</span>



Jsrender data traversal: Saw ASP. Pagedlist page (ii) Pagedlist+ajax+jsrender of the children's shoes on the jsrender of the data Traversal trust is not unfamiliar, the basic syntax is as follows:

{{for XXX}}
<li>{{:p Roperty of xxx}}</li>
{{/for}}

Sometimes want to get xxx itself how to do? As follows:

{{for xxx yyy}}
<li>{{: #data}}</li>
{{/for}}

The above example shows 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和 #index are built-in Jsrender keywords. Below is an example:
Copy Code

Template
{{for #data}}
<ul>
{{for language}}
<li> {: #parent. Parent.data.name}} is learning {{:title}}</li>
{{/for}}
</ul>
{{/for}}
Data
var studnets = [
{
"Name": "Mingjun Tang",
"Language": [{"title": "中文版"},{"title": "Franch"}]
},
{
"Name": "Ming Tang",
"Language": [{"title": "中文版"}]
}
];

Copy Code

#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:
Copy Code

{{if Fullprice}}
HTML markup
{{Else Halfprice}}
HTML markup
{{Else}}
HTML markup
{{/if}}

Copy Code

Yes, they're ripping it off, for example: {{if fullprice}}html markup{{/if}} and {{if fullprice}}html markup{{else}}html markup{{/if}}. But here are two points to note:

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 (note that here is equal to and not equal to 、、、、):
An example of an expression comment
|| {: a | | b}} or
&& {: a && B}} and
! {{:!a}} non-
<= and >= and < and > {: a <= B}} comparison
= = = and!== {: a = = b}} equals and does not equal

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

Jsrender Template nesting:

In the above example, nested two for loops, imagine that if the two for loop structure is very complex or nested under one or more for-loops, the above-mentioned jsrender increases the visibility and maintainability of the code to no longer exist. Jsrender also provides nesting of jsrender templates, overwriting the Jsrender template above:
Copy Code

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

Copy Code

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:
Copy Code

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

Copy Code

The above Templ no longer "#XXX" point to a script tag, but "XXX" points to a tagged script tag. (Haha said it really around the mouth).

OK, the basic stuff is almost there. But aside from that, Jsrender also has a good scalability. Take a look at it slowly ...

Add:

Some friends are asking Jsrender is now suitable for projects, crossing network introduction:

Warning:jsrender is close-to-beta, but not yet officially beta, so there could still be changes-APIs and features in the Coming period.

Jsrender, although close to the beta version, is not yet a formal beta. So its API or some features may still be changed. In other words, the stability of jsrender may not be very definite, so if the formal project is still recommended that you use jquery Template.

Next-generation jquery template-----JsRender