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

Posted 2023-02-24

【中文标题】在 jQuery 模板中获取当前项目索引的最简单方法

【英文标题】：Simplest way to get current item index within jQuery template

【发布时间】：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，提议将数组索引暴露给模板项，但它被关闭为无效...

【参考方案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';
              
           
    );