28

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

更新 我创建了一张票，建议将数组索引暴露给模板项，但它被关闭为无效......

4

8 回答 8

28

好吧，它不是一个真正独立的外部函数，但您可以将一个函数添加到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.

于 2010-11-02T20:54:54.720 回答
3

这是一个俗气的黑客：

${ _index === undefined && _index = 0, '' }
<strong>Item ${ index }:</strong> ${ content }
${ _index++, '' }
于 2011-03-23T05:17:39.150 回答
2

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...

Weird thing is that in Firebug I can see the key property for each $item: item key

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...

于 2011-03-01T18:44:01.727 回答
2

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

于 2012-10-16T03:13:46.103 回答
1

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

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

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

会成功的！

于 2012-03-14T21:38:23.057 回答
1

https://github.com/clarkbox/jquery-tmpl/commit/993e6fa128c5991723316032abe12ff0cbbb9805

修补你 jquery.template 然后你可以这样做：

<script id=”tabTemplate” type=”text/x-jquery-tmpl”&gt;
    <div id=“tab-${$index + 1}”&gt;
        <!— render tab contents here… —&gt;
    </div>
</script>
于 2012-01-12T17:42:06.367 回答
0

只需定义一个用于计数的全局变量：

var n = 0;
function outputTemplate(){
    return $( "#template_item" ).tmpl(datas,
          {
              getEvenOrOdd: function(){
                  return ++n % 2 == 0 ? 'odd' : 'even';
              }
          } 
    );
}
于 2013-02-17T23:25:23.900 回答
0

没有容易访问的索引。每个项目都有一个键。

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

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

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

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

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

于 2010-10-19T15:10:26.153 回答