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

Question

Я передаю массив объектов в шаблон 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 Я создал тикет , предлагающий выставить индекс массива для элемента шаблона, но он был закрыт как недействительный ...

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

Answer 2

Вот глупый хак:

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

Answer 3

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

Answer 4

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

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

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

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

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

Answer 5

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

Сначала, как и следовало ожидать, итерация по коллекции

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

Подойдет!

Answer 6

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>

Answer 7

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

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

Answer 8

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

<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 для каждой строки.

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