在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}}）。是否存在可能存储当前数组索引的内置变量？

更新 我创建了a ticket，建议将数组索引暴露给模板项，但它被关闭为无效...

Answer 1

好吧，它不是一个真正的单独的外部函数，但你可以将一个函数打到你可以传递给options的{​​{1}}对象上。我已经完成了以下工作并且工作正常：

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对象（与$ item.data相同）。因此，您可以将tmplItem写为无参数，并通过dataArrayIndex访问数据。

Answer 2

这是一个狡猾的黑客：

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

Answer 3

我自己也遇到过这个问题。很沮丧！ 例如，模板项的索引始终在jTemplates中可用。 难道不应该添加，我想... ...

奇怪的是，在Firebug中我可以看到每个$项的关键属性：

但是当我尝试从模板中调用的函数访问它时：

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

在函数中，如果我检查项目键属性，如'item.key'或'$（item）.key'，我得到'undefined'而不是实际值......

Answer 4

在javascript中创建一个函数来增加一个计数器。然后在javascript中创建一个函数来获取计数器的当前位置。可以使用{{ functionName() }}调用这些函数。在过去，我已经在html元素中使用了该函数，例如，在隐藏的输入标记中。这将使您能够使用索引。

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

Answer 6

使用jQuery 1.6.4或更新版本的简单方法。

首先，你期望迭代一个集合

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

会做的伎俩！

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

所以问题的答案是......不。

Answer 8

只需定义一个用于计数的全局变量：

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