Самый простой способ получить текущий индекс элемента в шаблоне jQuery

Я передаю массив объектов в шаблон jQuery (официальный плагин jquery-tmpl):

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

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

Каков самый простой способ отображения индекса элемента в шаблоне? Предпочтительно без использования разделенных внешних функций без изменения структуры переданного объекта и без изменения структуры шаблона (преобразование в {{each}}). Есть ли встроенная переменная, которая может хранить текущий индекс массива?

UPDATE Я создал билет, предлагающий выставить индекс массива в элемент шаблона, но он был закрыт как недопустимый...

Ответ 1

Ну, это не внешняя функция true, но вы можете пощекотать функцию на объект options, который вы можете передать на tmpl. Я сделал следующее, и он отлично работает:

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

В шаблоне вы можете получить доступ к функции из объекта $item:

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

В качестве альтернативы вместо передачи $item.data в функцию контекст функции является объектом tmplItem шаблона (то же, что и $item.data). Поэтому вы можете написать dataArrayIndex как без параметров и получить доступ к данным через this.data.

Ответ 2

Здесь cheezy hack:

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

Ответ 3

Просто наткнулся на эту проблему сам. очень расстраивает! Например, индекс элемента шаблона всегда был доступен в jTemplates. Не было бы трудно добавить это, я бы подумал...

Странно, что в Firebug я вижу свойство ключа для каждого элемента $item:

Но при попытке получить к нему доступ из функции, которую я вызываю из шаблона:

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

В функции, если я проверяю свойство ключа элемента как "item.key" или "$ (item).key" Я получаю "undefined", а не фактическое значение...

Ответ 4

Создайте функцию в javascript, чтобы увеличить счетчик. Затем создайте функцию в javascript, чтобы получить текущую позицию счетчика. Эти функции можно вызвать, используя {{ functionName() }}. Раньше я использовал функцию в элементе html, например, в скрытом теге ввода. Это позволит вам использовать индекс.

Ответ 5

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

Загрузите файл jquery.template, а затем выполните следующие действия:

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

Ответ 6

Простой способ сделать это, используя jQuery 1.6.4 или новее как минимум.

Сначала, как вы ожидали, итерации через коллекцию

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

Сделаем трюк!

Ответ 7

Нет легкодоступного индекса. К каждому элементу добавляется ключ.

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

Этот ключ доступен через jquery. Таким образом, вы можете сделать что-то вроде

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

Но это не то, что вы хотели. Я не думаю, что вы хотели. Объект ${$ item} должен представлять метод tmplItem(), но он не предоставляет значение для ${$item.key}. Использование ${$.tmplItem().key} производит 0 для каждой строки.

Итак, ответ на ваш вопрос -..... Нет.

Ответ 8

просто определите одну глобальную переменную для подсчета:

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