在 jQuery 模板中获取当前项目索引的最简单方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3895329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simplest way to get current item index within jQuery template
提问by serg
I am passing an array of objects to jQuery template (official jquery-tmplplugin):
我将一组对象传递给 jQuery 模板（官方jquery-tmpl插件）：
$("#itemTmpl").tmpl(items).appendTo("body");
<script id="itemTmpl" type="text/x-jquery-tmpl">
<div class="item">Name: ${name}, Index: ${???}</div>
</script>
What is the easiest way to display item index in the template? Preferably without using separated external functions, without changing passed object structure, and without changing template structure (converting to {{each}}). Is there any built-in variable perhaps that stores current array index?
在模板中显示项目索引的最简单方法是什么？最好不使用分离的外部函数，不改变传递的对象结构，也不改变模板结构（转换为{{each}}）。是否有任何内置变量可能存储当前数组索引？
UPDATEI created a ticketproposing to expose array index to template item but it was closed as invalid...
更新我创建了一张票，建议将数组索引公开给模板项，但它因无效而关闭...
回答by kdawg
Well, it's not a trueseparate external function, but you can slap a function onto the optionsobject you can pass to tmpl. I've done the following and it works fine:
好吧，它不是一个真正独立的外部函数，但是您可以将一个函数添加到options您可以传递给的对象上tmpl。我已经完成了以下操作并且效果很好：
$("#templateToRender").tmpl(jsonData,
{
dataArrayIndex: function (item) {
return $.inArray(item, jsonData);
}
});
In the template, you can access the function from the $itemobject:
在模板中，您可以从$item对象访问该函数：
<script id="templateToRender" type="text/x-jquery-tmpl">
<li>
Info # ${$item.dataArrayIndex($item.data)}
</li>
</script>
Alternatively, instead of passing $item.datainto the function, the context of the function is the tmplItemobject of the template (same as $item.data). So you could write dataArrayIndexas parameterless and access the data via this.data.
或者，$item.data函数的上下文不是传递给函数，而是tmplItem模板的对象（与 $item.data 相同）。因此，您可以编写dataArrayIndex为无参数并通过this.data.
回答by a paid nerd
Here's a cheezy hack:
这是一个俗气的黑客：
${ _index === undefined && _index = 0, '' }
<strong>Item ${ index }:</strong> ${ content }
${ _index++, '' }
回答by user1748815
Create a function in javascript to increment a counter. Then create a function in javascript to get the current position of the counter. These functions can be called by using {{ functionName() }}. In the past I have had use the function in an html element, for example, in a hidden input tag. This will enable you to use an index.
在 javascript 中创建一个函数来增加一个计数器。然后在javascript中创建一个函数来获取计数器的当前位置。可以使用 调用这些函数{{ functionName() }}。过去我曾在 html 元素中使用过该函数，例如，在隐藏的输入标签中。这将使您能够使用索引。
回答by poeticGeek
Just ran into this issue myself. very frustrating! The index of the template item for example was always available in jTemplates. Shouldnt have been difficult to add that in i would think...
刚刚自己遇到了这个问题。非常令人沮丧！例如，模板项的索引在 jTemplates 中始终可用。不应该很难在我认为...
Weird thing is that in Firebug I can see the key property for each $item:
奇怪的是，在 Firebug 中，我可以看到每个 $item 的关键属性：
But when trying to access it from a function i call from within the template:
但是当试图从我从模板中调用的函数访问它时：
<img class="profImage" src="${getProfileImage($item)}" />
In the function if I check the item key property either like 'item.key' or '$(item).key' I get 'undefined' and not the actual value...
在函数中，如果我检查项目键属性，例如“item.key”或“$(item).key”，我会得到“undefined”而不是实际值...
回答by v.tsurka
https://github.com/clarkbox/jquery-tmpl/commit/993e6fa128c5991723316032abe12ff0cbbb9805
https://github.com/clarkbox/jquery-tmpl/commit/993e6fa128c5991723316032abe12ff0cbbb9805
Patch you jquery.template and then you can do like this:
给你 jquery.template 打补丁，然后你可以这样做：
<script id=”tabTemplate” type=”text/x-jquery-tmpl”>
<div id=“tab-${$index + 1}”>
<!— render tab contents here… —>
</div>
</script>
回答by bobber205
Easy way to do this using jQuery 1.6.4 or newer at least.
至少使用 jQuery 1.6.4 或更新版本的简单方法来做到这一点。
First as you'd expect iterate through a collection
首先，正如您所期望的那样遍历集合
{{each myListofStuff}}
Index: ${$this.index}
{{/each}}
Will do the trick!
会做的伎俩！
回答by Capitaine
simply define one global variable for counting:
只需定义一个用于计数的全局变量：
var n = 0;
function outputTemplate(){
return $( "#template_item" ).tmpl(datas,
{
getEvenOrOdd: function(){
return ++n % 2 == 0 ? 'odd' : 'even';
}
}
);
}
回答by Tom B
There is no easily accessible index. There is a key that is appended to each item.
没有易于访问的索引。有一个键附加到每个项目。
<div class="item" jQuery1287500528620="1">
This key is accessible through jquery. So you can do something like
这个键可以通过 jquery 访问。所以你可以做类似的事情
$(".item").each(function () {
var theTemplate = $(this).tmplItem();
$(this).append("Index: " + theTemplate.key);
});
But that's not what you wanted. I don't think what you wanted is possible. The ${$item} object is supposed to represent the tmplItem() method, but it doesn't provide a value for ${$item.key}.Using ${$.tmplItem().key}produces 0 for each row.
但这不是你想要的。我不认为你想要的是可能的。${$item} 对象应该表示 tmplItem() 方法，但它没有为${$item.key}.Using${$.tmplItem().key}为每一行生成 0提供值。
So the answer to your question is..... No.
所以你的问题的答案是......不。
