最简单的方式jQuery的模板

我传递的对象数组jQuery的模板（官方jquery-tmpl插件）中获得当前项目指标：最简单的方式jQuery的模板

$("#itemTmpl").tmpl(items).appendTo("body"); 

<script id="itemTmpl" type="text/x-jquery-tmpl"> 
    <div class="item">Name: ${name}, Index: ${???}</div> 
</script>

什么是在模板中显示项目索引的最简单的方法？最好不使用分离的外部函数，不改变传递的对象结构，也不改变模板结构（转换为{{each}}）。有没有内置的变量可能存储当前的数组索引？

UPDATE 我创建a ticket提议数组索引暴露在模板项目，但它被关闭无效...

来源

2010-10-09 serg

有没有方便的索引。每个项目都附有一个密钥。

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

此密钥可通过jquery访问。所以你可以做类似

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

但这不是你想要的。我不认为你想要什么是可能的。 $ {$ item}对象应该表示tmplItem（）方法，但它不会为每行的值提供${$.tmplItem().key}。

所以回答你的问题是.....号

来源

2010-10-19 15:10:26

嗯，这是不是一个真正的单独外部函数，但是你可以拍一个功能到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-02 20:54:54 kdawg

太酷了！我试了一下，它完美的作品！ – Mrchief 2010-12-28 15:29:12

真棒答案，谢谢kdawg – andrhamm 2011-09-14 14:05:51

代码更新和简化：$ {dataArrayIndex（$ data）} – Capitaine 2012-06-07 19:34:34

刚刚遇到这个问题我自己。非常沮丧！例如，模板项目的索引在jTemplates中始终可用。不应该已经难以补充说，我想......

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

但试图从访问时功能我在模板中称：

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

在功能，如果我签“关键$（项目）”我得到“未定义”，而不是实际的项目主要属性要么喜欢“item.key”或值...

来源

2011-03-01 18:44:01 poeticGeek

键在模板呈现完成后设置。您可以在模板中看到“真实”商品内容： $ {console.log（JSON.stringify（$ item））} – MatteoSp 2013-07-11 08:29:10

这里有一个cheezy黑客：

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

来源

2011-03-23 05:17:39

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>

来源

2012-01-12 17:42:06

简单的方法来做到这一点使用jQuery 1.6。至少4或更新。

首先你会期望通过迭代集合

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

会做的伎俩！

来源

2012-03-14 21:38:23 bobber205

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

来源

2012-10-16 03:13:46 user1748815

简单地定义一个全局变量计数：

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

来源

2013-02-17 23:25:23 Capitaine

最简单的方式jQuery的模板

回答

相关问题