Introduction to JsRender for object syntax_javascript skills

This article briefly describes the basic syntax of JsRender for object. Share it with everyone for your reference. The details are as follows:

As a JavaScript template engine, JsRender must have a loop function, that is, for. However, because JsRender is too flexible, for can actually accept object as a loop object.

{{for Array}} and {{for Object}} are both allowed. Everyone can understand {{for Array}}, which is to traverse an array and take out each element one by one. But {{for Object}} is a bit confusing, and the official document only gives an unhelpful example without any other explanation.

At first Xiaocai thought that the purpose of {{for Object}} was to traverse all the properties of the Object, but after thinking about it carefully, this function {{props Object}} has been implemented. The function of the props tag is to traverse all the properties of the Object. There are as many attributes as there are loops. Each loop will have two hidden attributes: key and prop. Key represents the attribute name and prop represents the attribute value. It is very convenient to use.

Actually, {{for Object}} is not a loop. It can be understood as entering (Into), which means entering the Object environment and setting the current context to Object, similar to with in Handlebars.js .

For example:

data:

Copy code The code is as follows:

{
"title": "The A team",
"members": [
          {
"name": "Pete",
"city": "members_city",
"address": {
"city": "address_city",
"city1": "address_city1",
"city2": "address_city2"
}
}
]
}

template markup:

Copy code The code is as follows:

{{for members}}
{{for address}}

.{{:city}}

{{/for}}
{{/for}}

result:

Copy code The code is as follows:

address_city

It can be seen from the results that although there is also a city attribute under the members item, because it enters the Object pointed to by address through {{for address}}, {{:city}} is obtained directly from address.

At the same time, address has three attributes, but the result only outputs one line, which proves that {{for Object}} does not loop, it just switches this.

I hope this article will be helpful to everyone’s learning of JsRender programming.