最簡單的方式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的模板

回答

相關問題