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

Question

我将一个对象数组传递给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}}).是否有任何内置变量可能存储当前数组索引？

更新 我创建了一个建议将数组索引公开给模板项的票证,但它被关闭为无效...

Answer 1

好吧,它不是一个真正独立的外部函数,但你可以将一个函数拍到options你可以传递给的对象上tmpl.我做了以下工作,它工作正常:

$("#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.

Answer 2

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

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

该键可通过 jquery 访问。所以你可以做类似的事情

$(".item").each(function () {
                var theTemplate = $(this).tmplItem();
                $(this).append("Index: " + theTemplate.key);
            });

但这不是你想要的。我认为你想要的不可能。${$item} 对象应该表示 tmplItem() 方法，但它没有为每行${$item.key}. 使用生成 0 提供值。${$.tmplItem().key}

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