JsRender for object syntax introduction, jsrenderobject

JsRender for object syntax introduction, jsrenderobject

This article briefly describes the basic syntax of JsRender for object. Share it with you for your reference. The details are as follows:
 
As a JavaScript template engine, JsRender has a loop function, that is, for. However, because JsRender is too flexible, for can accept objects as cyclic objects.

Both {for Array} and {for Object} are allowed. {for Array} can be understood as traversing an Array to retrieve each element one by one. However, {for Object} is a bit confusing, and the official document only provides an example of no help.

At the beginning, I thought that the purpose of {for Object} was to traverse all the attributes of the Object. But after careful consideration, this function {props Object} has been implemented, the props tag is used to traverse all the attributes of the Object. The number of attributes indicates the number of cycles. Each loop has two hidden attributes: key, prop, and key, which represent the attribute name, prop indicates the property value, which is very convenient to use.

In fact, {for Object} is not a loop. It can be understood as "Into". That is to say, it enters the Object environment and sets the current context as an Object, similar to Handlebars. with in js.

For example:

Data:

Copy codeThe 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 codeCode: {for members }}
{For address }}
<P>. {{: city }}</p>
{/}}
{/}}

Result:

Copy codeThe Code is as follows: address_city
 

It can be seen from the results that although members's item also has the city attribute, but because {for address} is passed into the Object pointed to by address ,{{: city} is obtained directly from the address.

At the same time, the address has three attributes, but only one row is output. It turns out that {for Object} does not loop, just switching this.

I hope this article will help you learn about JsRender programming.