Bug Tracker

#7137 closed enhancement (invalid)

Opened October 09, 2010 03:41PM UTC

Closed October 13, 2010 07:48PM UTC

Last modified March 15, 2012 12:29PM UTC

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:
Description

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.

Attachments (0)
Change History (7)

Changed October 13, 2010 07:48PM UTC by addyosmani comment:1

priority: undecided → low
resolution: → invalid
status: new → closed

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/

Changed October 14, 2010 03:33AM UTC by serg555 comment:2

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

Changed October 20, 2010 04:33PM UTC by ben comment:3

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

Changed October 20, 2010 04:35PM UTC by anonymous comment:4

Replying to [comment:3 ben]:

should be

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

Changed October 25, 2010 06:52AM UTC by john2095 comment:5

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

Changed December 16, 2010 06:55PM UTC by BorisMoore comment:6

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

Changed January 29, 2011 03:09PM UTC by axel@rauschma.de comment:7

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