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

【问题标题】：Simplest way to get current item index within jQuery template在 jQuery 模板中获取当前项目索引的最简单方法
【发布时间】：2011-04-23 03:49:46
【问题描述】：

我正在将一个对象数组传递给 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，提议将数组索引暴露给模板项，但它被关闭为无效...

【问题讨论】：

标签： jquery jquery-templates

【解决方案1】：

嗯，它不是一个 true 单独的外部函数，但您可以将一个函数添加到您可以传递给 tmpl 的 options 对象上。我已经完成了以下操作，效果很好：

$("#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 访问数据。

【讨论】：

【解决方案2】：

这是一个俗气的黑客：

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

【讨论】：

【解决方案3】：

我自己也遇到了这个问题。非常令人沮丧！例如，模板项的索引在 jTemplates 中始终可用。我认为应该不难添加它......

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

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

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

在函数中，如果我检查项目键属性，例如“item.key”或“$(item).key”，我会得到“未定义”而不是实际值...

【讨论】：

键在模板渲染完成后设置。您可以在模板中看到“真实”的项目内容：${console.log(JSON.stringify($item))}

【解决方案4】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

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

首先，正如您所期望的那样遍历一个集合

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

会成功的！

【讨论】：

【解决方案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。

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

【讨论】：

【解决方案8】：

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

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

【讨论】：