Bug Tracker

Opened 7 years ago

Closed 7 years ago

Last modified 5 years ago

#7137 closed enhancement (invalid)

jQuery-tmpl: Expose array index for items

Reported by: serg555 Owned by:
Priority: low Milestone: 1.4.3
Component: templates Version: 1.4.2
Keywords: jquery-tmpl, templating Cc:
Blocked by: Blocking:


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.

Change History (7)

comment:1 Changed 7 years ago by addyosmani

Priority: undecidedlow
Resolution: invalid
Status: newclosed

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.


comment:2 Changed 7 years ago by 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})

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})

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

comment:3 Changed 7 years ago by 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>

hope this helps

comment:4 in reply to:  3 Changed 7 years ago by anonymous

Replying to ben: should be

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

comment:5 Changed 7 years ago by john2095

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


comment:6 Changed 6 years ago by BorisMoore

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

comment:7 Changed 6 years ago by 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

Note: See TracTickets for help on using tickets.