jQuery-tmpl: Expose array index for items

[serg555]

When you are passing an array of objects to a template, I think $item object should also expose current array index. I saw examples in the repository how to get item index by calling external function with $.inArray(), but that's like the most inconvenient and inefficient method possible, plus wouldn't always work.

Item index is required very often - when you need to check if this is the first item, the last item, for alternating classes.

Full scale templating engines also usually have: count, isFirst, and isLast internal variables, but as long as there is an index you can do the rest yourself.

[addyosmani]

If you read through here you should find an adequate explanation of how index references can be used with the template plugin (through each) without the need for directly doing ${item.index} for example.

This should be adequate for the majority of use cases where arrays/multi-dimensions arrays are being used but if there's something we've missed that you feel could justify offering what you've mentioned please feel free to expand on your original ticket.

​http://api.jquery.com/template-tag-each/

[serg555]

If you look at your demo ​here, this is what you do in order to just get item index:

$( "#sometmpl" )
		.tmpl( arrayOfDataObjects, { array: arrayOfDataObjects} )
		.prependTo( "ul" );


function index( array ) {
	return $.inArray( this.data, array ) + 1;
}

<script id="sometmpl" type="text/x-jquery-tmpl">
    ${index($item.array)} of ${$item.array.length})
</script>		

I don't think this is a convenient way of doing something as common as getting array index.

Wouldn't it be better to have something like this instead:

<script id="sometmpl" type="text/x-jquery-tmpl">
    ${$item.index} of ${$item.array.length})
</script>

In perfect world there should be not only ${item.index}, but ${item.count}, ${item.first} and ${item.last}.

[ben]

I agree the ${$item.index} would be simpler, but I worked around it by passing a value in

$( "#movieTemplate" ).tmpl( movies,
    { 
        myIndex: $("#movieList .movieItem").length
    } 
).appendTo( "#movieList" );

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <tr class="movieItem" name="movieItem_${ $item.index }> ... </tr>
</script>

hope this helps

[anonymous]

Replying to ben: should be

index: $("#movieList .movieItem").length

[john2095]

You can perhaps run your index derived manipulation after the template generation is completed. For example to cycle a class for striped presentation:

   $("#itemTemplate").tmpl(data).appendTo('ul')
   $("li:odd").addClass('odd')

[BorisMoore]

See also here ​http://api.jquery.com/jquery.tmpl/#comment-111707270 for reasons why we don't currently provide $item.index

[axel@…]

Another work-around is to translate FROM: [ "css", "tips" ] TO: [ { value: "css", last: false }, { value: "tips", last: true } ]}

Details: ​http://www.2ality.com/2011/01/jquery-templates-quick-start-and-tips.html