Introduction to JsRender for object syntax _javascript tips

This article briefly describes the basic syntax of Jsrender for object. Share to everyone for your reference. Specifically as follows:

JsRender as a JavaScript template engine, it is necessary to have a circular function, that is, for, but because the JsRender is too flexible, for it can accept object as a loop object.

{{for array}} and {{for Object}} are allowed, {{for array}} Everyone can understand that it is to traverse an array and remove each element individually. But {{for Object}} is a bit confusing, and the official document is just a little helpful example, with no other explanation.

Just beginning. The intent of {{for Object}} is to traverse all the properties of the object, but think about it, this feature {props object}} has already been implemented, the props tag is to traverse all properties of object, how many properties, how many times, Each loop has two hidden attributes: Key,prop,key represents the property name, and prop represents the property value, which is convenient to use.

In fact, {{for Object}} is not a loop, it can be interpreted as entering (into), which means entering into an object environment, setting the current context to object, similar to the with in Handlebars.js.

As an example:

Data

Copy Code code 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 code as follows:

{{for Members}}
{{for address}}
<p>. {{:city}}</p>
{{/for}}}
{{/for}}}

Result

Copy Code code as follows:

Address_city

As can be seen from the result, although members of the item also has the city attribute, but because through {{for address}} into the object pointed to by the address, the {: City}} is directly obtained from the address.

At the same time, the address has three properties, but the result is only one row, proving that {{for Object}} is not looping, just switch this.

I hope this article is helpful to the study of Jsrender programming.