Bug Tracker

Opened 13 years ago

Closed 13 years ago

Last modified 11 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 13 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 13 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 13 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 13 years ago by anonymous

Replying to ben: should be

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

comment:5 Changed 13 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 12 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 12 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.