Bug Tracker

Modify

Ticket #7137 (closed enhancement: invalid)

Opened 4 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

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.

Change History

comment:1 Changed 4 years ago by addyosmani

  • Priority changed from undecided to low
  • Status changed from new to closed
  • Resolution set to invalid

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/

comment:2 Changed 4 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})
</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}.

comment:3 follow-up: ↓ 4 Changed 3 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>
</script>

hope this helps

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

Replying to ben: should be

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

comment:5 Changed 3 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:

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

comment:6 Changed 3 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 3 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

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.