在jQuery模板中获取当前项索引的最简单方法

我将一个对象数组传递给jQuery模板(官方jquery-tmpl插件):

 $("#itemTmpl").tmpl(items).appendTo("body");  
Name: ${name}, Index: ${???}

在模板中显示项目索引的最简单方法是什么? 优选地,不使用分离的外部函数,而不改变传递的对象结构,并且不改变模板结构(转换为{{each}} )。 是否有任何内置变量可能存储当前数组索引?

更新我创建了一个建议将数组索引暴露给模板项的票证 ,但它被关闭为无效…

好吧,它不是一个真正独立的外部函数,但你可以将一个函数tmpl你可以传递给tmploptions对象上。 我做了以下工作,它工作正常:

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

在模板中,您可以从$item对象访问该函数:

  

或者,不是将$item.data传递给函数,而是函数的上下文是模板的tmplItem对象(与$ item.data相同)。 因此,您可以将dataArrayIndex写为无参数,并通过this.data访问数据。

这是一个cheezy hack:

 ${ _index === undefined && _index = 0, '' } Item ${ index }: ${ content } ${ _index++, '' } 

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

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

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

  

在函数中,如果我检查项密钥属性,如’item.key’或’$(item).key’,我得到’undefined’而不是实际值…

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

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

修补你jquery.template然后你可以这样做:

  

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

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

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

会做的伎俩!

没有容易获得的索引。 每个项目都附加一个键。

 

可以通过jquery访问此密钥。 所以你可以做点什么

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

但这不是你想要的。 我不认为你想要的是可能的。 $ {$ item}对象应该表示tmplItem()方法,但它不提供${$item.key}. 使用${$.tmplItem().key}为每行产生0。

所以问题的答案是……

只需定义一个全局变量进行计数:

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