Simplest way to get current item index within jQuery template

Question

I am passing an array of objects to jQuery template (official jquery-tmpl plugin):

$("#itemTmpl").tmpl(items).appendTo("body");

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <div class="item">Name: ${name}, Index: ${???}</div>
</script>

What is the easiest way to display item index in the template? Preferably without using separated external functions, without changing passed object structure, and without changing template structure (converting to {{each}}). Is there any built-in variable perhaps that stores current array index?

UPDATE I created a ticket proposing to expose array index to template item but it was closed as invalid...

score 28 · Answer 1 · answered Nov 02 '10 at 20:54

Well, it's not a true separate external function, but you can slap a function onto the options object you can pass to tmpl. I've done the following and it works fine:

$("#templateToRender").tmpl(jsonData,
  {
    dataArrayIndex: function (item) {
      return $.inArray(item, jsonData);
    }
  });

In the template, you can access the function from the $item object:

<script id="templateToRender" type="text/x-jquery-tmpl">
  <li>
    Info # ${$item.dataArrayIndex($item.data)}
  </li>
</script>

Alternatively, instead of passing $item.data into the function, the context of the function is the tmplItem object of the template (same as $item.data). So you could write dataArrayIndex as parameterless and access the data via this.data.

score 3 · Answer 2 · answered Mar 23 '11 at 05:17

3

Here's a cheezy hack:

${ _index === undefined && _index = 0, '' }
<strong>Item ${ index }:</strong> ${ content }
${ _index++, '' }

answered Mar 23 '11 at 05:17

a paid nerd

30,702
30
134
179

score 2 · Answer 3 · edited Oct 16 '12 at 22:37

2

Create a function in javascript to increment a counter. Then create a function in javascript to get the current position of the counter. These functions can be called by using {{ functionName() }}. In the past I have had use the function in an html element, for example, in a hidden input tag. This will enable you to use an index.

edited Oct 16 '12 at 22:37

A.M.K

16,727
4
32
64

answered Oct 16 '12 at 03:13

user1748815

41
3

score 2 · Answer 4 · answered Mar 01 '11 at 18:44

Just ran into this issue myself. very frustrating! The index of the template item for example was always available in jTemplates. Shouldnt have been difficult to add that in i would think...

Weird thing is that in Firebug I can see the key property for each $item: item key

But when trying to access it from a function i call from within the template:

<img class="profImage" src="${getProfileImage($item)}" />

In the function if I check the item key property either like 'item.key' or '$(item).key' I get 'undefined' and not the actual value...

key is set after template rendering completes. you can see "real" item content in the template with: ${console.log(JSON.stringify($item))} — MatteoSp, Jul 11 '13 at 08:29

score 1 · Answer 5 · answered Jan 12 '12 at 17:42

https://github.com/clarkbox/jquery-tmpl/commit/993e6fa128c5991723316032abe12ff0cbbb9805

Patch you jquery.template and then you can do like this:

<script id=”tabTemplate” type=”text/x-jquery-tmpl”>
    <div id=“tab-${$index + 1}”>
        <!— render tab contents here… —>
    </div>
</script>

score 1 · Answer 6 · answered Mar 14 '12 at 21:38

1

Easy way to do this using jQuery 1.6.4 or newer at least.

First as you'd expect iterate through a collection

{{each myListofStuff}}
Index: ${$this.index}
{{/each}}

Will do the trick!

answered Mar 14 '12 at 21:38

bobber205

12,948
27
74
100

score 0 · Answer 7 · answered Feb 17 '13 at 23:25

simply define one global variable for counting:

var n = 0;
function outputTemplate(){
    return $( "#template_item" ).tmpl(datas,
          {
              getEvenOrOdd: function(){
                  return ++n % 2 == 0 ? 'odd' : 'even';
              }
          } 
    );
}

score 0 · Answer 8 · answered Oct 19 '10 at 15:10

There is no easily accessible index. There is a key that is appended to each item.

<div class="item" jQuery1287500528620="1">

This key is accessible through jquery. So you can do something like

$(".item").each(function () {
                var theTemplate = $(this).tmplItem();
                $(this).append("Index: " + theTemplate.key);
            });

But that's not what you wanted. I don't think what you wanted is possible. The ${$item} object is supposed to represent the tmplItem() method, but it doesn't provide a value for ${$item.key}. Using ${$.tmplItem().key} produces 0 for each row.

So the answer to your question is..... No.

Simplest way to get current item index within jQuery template

8 Answers8

Linked