JsRender Study Summary

Last Update:2017-07-10 Source: Internet

Author: User

Tags pow tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JsRender three most important concepts: templates, containers, and data. Most importantly: View is the template we define, and the context is the object used by the view.

First, the foundation.

{{:}} and {{;}} (or {{html:}}) can both output content, although the latter is HTML-encoded.

{{: pathorexpr}}             (value) value type  {{> pathorexpr}}             (html-encoded value) HTML-encoded value  {{* Mycode}}                 (using code)

Second, logical judgment and circulation.

If-else

Syntax: {{if condition}} ... {Else Condition} ... {{Else}} ... {{/if}}

Example:

<script type= "text/tmp" id= "Tmp4" >    <p>my name is: {{:name}}</p>    <p> I am:        {{if Info.age >=}}            adult        {{else}}            minor        {{/if}}    </p></script>var HTML = $ ("#tmp4"). Render (data); $ ("#list"). HTML (HTML);

For

Syntax: {{for}} ... {{/for}}

Example:

<script type= "text/tmp" id= "TMP5" >  {{for}}    <li>id:{{:id}} name:{{:name}}</li>  {{/ For}} </script>var arr = [    {id:1, Name: "Tom"},    {id:2, Name: "Jack"},    {id:3, Name: "Lucy"}];v AR html = $ ("#tmp5"). Render (arr); $ ("#list"). HTML (HTML);

Nesting for

Syntax: syntax: {{for}} ... {{For current context}} ... {{/for}} ... {{/for}}

Example:

<script type= "text/tmp" id= "TMP7" > {{for}}    <li>        name:{{:name}}        <ul>            {{for Hobbies}}              <li>{{: #getIndex () + 1}}:{{: #data}}</li>            {{/for}}        </ul>    </li>{ {/for}} </script>arr = [{name: "Tom", Hobbies: ["basketball", "soccer"]},{name: "Jack", Hobbies: ["basketball", "rugby"]},{name: "Lucy", Hobb IES: ["Swimming", "badminton"]}];var HTML = $ ("#tmp7"). Render (arr); $ ("#list"). HTML (HTML);

Detach for

Syntax: {{for context tmpl= ' template id '/}}

If the logic of the for is more complex, the nested for will complicate our template and make maintenance more difficult; we can separate for, in the example above, you can put for a new template and then specify it through the Tmpl property.

Example:

<script type= "text/tmp" id= "Tmp8" > {{for}}    <li>    name:{{:name}}        <ul>            {{for Hobbies tmpl= "#tmp9"/}}        </ul>    </li>{{/for}} </script><script type= "text/tmp" id= "TMP9 >     <li>{{: #getIndex () + 1}}:{{: #data}}</li> </script>var HTML = $ ("#tmp8"). Render (arr); $ ("# List "). html (HTML);

Nested loops use parameters to access the parent data, looking directly at the example:

<!doctype html>
　　
III. Expansion of applications
The basic usage above has already satisfied most of the requirements. The following extensions are all designed to separate views and logic, just imagine that if we have a lot of logical judgments or calculations in our view, all of them are written together, it can be cumbersome and difficult to maintain. The best view is a simple label, and the logic is written in JS. The Jsrender is extended on the view.
Portfolio templates: Include portfolio templates
Syntax: include tmpl= "template ID"
Example:
<! DOCTYPE html>
　　
Custom Tags: views.tags and views.helpers
Grammar:
Views.tags
1. View {{"label name" tag parameter additional parameters}}
2. Logic $.views.tags ({"tag name": function (parameter) {this.tagCtx.props.prefix additional parameter}})//prefix additional parameter is the name of the parameter you passed
Views.helpers
1. View {{~ ' tag name ' (Additional parameters)}}
2. Logic $.views.helpers ({"tag name": function (parameter) {//Specific logic}})
Because the two are basically the same, but views.helpers more flexible
Example:
<! DOCTYPE html>
　　
Converter Converter
The converter can process the output results, such as case conversion and so on.
Grammar:
1. View {"Converter name": Parameter}}
2. js $.views.converters ({"Converter name": function (parameter) {...}})
<script type= "text/tmp" id= "Tmp11" >     {{for}}        <li>            Upper Name: {{toUpper: #parent. Data.name}}        </li>    {{/for}} </script>$.views.converters ({    "ToUpper": function (name) {        if (name) {           return Name.touppercase ();}}    ) var html = $ ("#tmp11"). Render (arr); $ ("#list"). HTML (HTML)
Reprinted from: http://www.cnblogs.com/panmy/p/5927269.html
Official website: www.jsviews.com
JsRender Study Summary

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More