Question

Using the jquery-tmpl, I want to stripe presentation of the rows by adding a class to every second one, so from data [ Cat , Dog , Horse , Noddy ] it generates:

<li>Cat</li>
<li class="odd">Dog</li>
<li>Horse</li>
<li class="odd">Noddy</li>

The solutions suggested here looked like the start of something that could be further refined for easy digestion by us noddy s.

Answer 1

Never mind. Overcomplicating things as usual...

Just follow it up with the :odd selector with addClass...

$( #template ).tmpl(data).appendTo( #list )
$("#list li:odd").addClass( odd )

Answer 2

Just found the solution after few trial and errors. You can use the {{= }} tag for evaluating expression:

{{each(i) Animals}}<li class="{{= i % 2 ?  even  :  odd }}">...</li>{{/each}}

Of course you can modify it to suit your needs exactly - you can put the class inside and print empty value for odd or even.

Another solution would be to use a function (there is example of this in the jquery tmpl docs), but it is ugly.

Answer 3

@John Mee, I don t think you are overcomplicating.

Imho the template is the place where the addition of the odd-Class should take place. Logic and performance wise.

Here is a patch for having the index inside a nested template. If you like to have an additional $odd property it could be easily extended as follows:

jQuery.map( data, function( dataItem, index ) {
    if(dataItem){
         dataItem.$index = index;
         dataItem.$odd = index % 2 === 1;
    }

友情链接