在jQuery模板中获取当前项索引的最简单方法
我将一个对象数组传递给jQuery模板(官方jquery-tmpl
插件):
$("#itemTmpl").tmpl(items).appendTo("body"); Name: ${name}, Index: ${???}
在模板中显示项目索引的最简单方法是什么? 优选地,不使用分离的外部函数,而不改变传递的对象结构,并且不改变模板结构(转换为{{each}}
)。 是否有任何内置变量可能存储当前数组索引?
更新我创建了一个建议将数组索引暴露给模板项的票证 ,但它被关闭为无效…
好吧,它不是一个真正独立的外部函数,但你可以将一个函数tmpl
你可以传递给tmpl
的options
对象上。 我做了以下工作,它工作正常:
$("#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'; } } ); }