Explanation of the usage of JsRender for index circular index, jsrender index

Explanation of the usage of JsRender for index circular index, jsrender index

This example describes the use of JsRender for index loop indexes. Share it with you for your reference. The specific analysis is as follows:

JsRedner and JsViews (JsViews are further encapsulated based on JsRender) are called the next-generation Jquery template. Official Address:
Https://github.com/BorisMoore/jsrender;
Https://github.com/borismoore/jsviews.

Loop is an essential part of the template engine. Speaking of loop, it will lead to a crucial factor: Index.

The so-called index, that is, the number of cycles. Through the index, you can obtain the number of cycles for the current cycle.

If you have read the official documentation, you will see the following indexing method:

Data:

Copy codeThe Code is as follows :{
Names: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Template markup:

Copy codeCode: {for names }}
<Div>
<B >{{:# index + 1 }}. </B>
<Span >{{:# data }}</span>
</Div>
{/}}

Result:

Copy codeThe Code is as follows: 1. Maradona
2. Pele
3. Ronaldo
4. Messi

The index can be obtained through the special literal # index in the loop. The special literal # data is equivalent to this, which represents every name in this example.

Next, let's look at the above example, but this time I want to show only the names starting with M:

Data:

Copy codeThe Code is as follows :{
Names: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Template markup:

Copy codeCode: {for names }}
{If # data. indexOf ("M") = 0 }}
<Div>
<B >{{:# index + 1 }}. </B>
<Span >{{:# data }}</span>
</Div>
{/If }}
{/}}

Result:

Copy codeThe Code is as follows: Unavailable (nested view): use # getIndex () 1. Maradona
Unavailable (nested view): use # getIndex () 1. Messi

An if judgment is added, and an error is returned!

The problem lies in # index. The error prompt is clear. You can replace # index with # getIndex.

Try the replaced code:

Data:

Copy codeThe Code is as follows :{
Names: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Template markup:

Copy codeCode: {for names }}
{If # data. indexOf ("M") = 0 }}
<Div>
<B >{{:# getIndex () + 1 }}. </B>
<Span >{{:# data }}</span>
</Div>
{/If }}
{/}}

Result:

Copy codeThe Code is as follows: 1. Maradona
4. Messi

Why? Simply put, although {if} does not create a common data scope, it interferes with the hidden scope. That is to say, {if} will not block the visibility of general data (the data you pass in), but will interfere with the visibility of hidden data (# index, # parent. This is a simple understanding, and you don't have to go into it, because this is only a defect of this framework and is not a standard.

Therefore, this article gives readers a very important conclusion: Try to use # getIndex () to obtain the index and avoid using # index unless your application is simple enough.

I hope this article will help you learn JsRender.

The detailed usage of jquery index, how does jquery retrieve the index?

// 1. Pass a DOM object and return the index position of this object in the original set $ ('lil '). index ($ ('# bar'); // 1, passing a jQuery object $ ('lil '). index ($ ('li: gt (0) '); // 1, passing a set of jQuery objects, returns the index position of the first element in this object in the original set $ ('# bar '). index ('lil'); // 1. Pass a selector and return # position of bar in all li. // 1. No parameter is passed, returns the index position of this element in the same generation.

What is the index usage in labview loop structure?

Output the index directly. I don't quite understand what you mean, so I can elaborate on it.