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

我正在向jQuery模板传递一个对象数组（官方

jquerytmpl

plugin）：

$（“#itemTmpl”）.tmpl（items）.appendTo（“body”）；
名称：${Name}，索引：${？？？}

在模板中显示项目索引的最简单方法是什么？最好不使用分离的外部函数，不更改传递的对象结构，也不更改模板结构（转换为

{{each}}

）。是否有存储当前数组索引的内置变量

更新

---

我创建了一个向模板项公开数组索引的提议，但它被关闭为无效…

没有易于访问的索引。每个项目都会附加一个键

<div class="item" jQuery1287500528620="1">

但那不是你想要的。我认为你想要的是不可能的。${$item}对象应该表示tmplItem（）方法，但它不为

${$item.key}提供值。

使用

${$.tmplItem（）.key}

为每一行生成0

---

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

好吧，这不是一个真正的独立外部函数，但是你可以在你可以传递给

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.dataArrayIndex（$item.data）}

---

或者，函数的上下文不是将

$item.data

传递到函数中，而是模板的

tmplItem

对象（与$item.data相同）。因此，您可以将

dataArrayIndex

作为无参数编写，并通过

this访问数据。非常令人沮丧！
例如，模板项的索引在jTemplates中始终可用。
我想，把这句话加进去并不难

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

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

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



在函数中，如果我检查item key属性，如'item.key'或'$（item.key'），我得到的是'undefined'，而不是实际值
 这里有一个俗气的黑客：

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

${u index==undefined&&&u index=0，'}
项${index}:${content}
${u index++，''}

为jquery.template打补丁，然后可以执行以下操作：

<script id=”tabTemplate” type=”text/x-jquery-tmpl”>
    <div id=“tab-${$index + 1}”>
        <!— render tab contents here… —>
    </div>
</script>

至少使用jQuery 1.6.4或更高版本可以轻松实现这一点

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

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

我会成功的
 在javascript中创建一个函数来增加计数器。然后在javascript中创建一个函数来获取计数器的当前位置。可以使用
{{functionName（）}
调用这些函数。在过去，我曾在html元素中使用该函数，例如，在隐藏的输入标记中。这将使您能够使用索引。
只需定义一个全局变量进行计数：

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

在模板呈现完成后设置键。您可以通过：${console.log（JSON.stringify（$item））}在模板中看到“真实”的项目内容
{{each myListofStuff}}
Index: ${$this.index}
{{/each}}

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