web-dev-qa-db-fra.com

Le moyen le plus simple obtenir l'index actuel dans le modèle jQuery

Je passe un tableau d'objets au modèle jQuery (plugin officiel jquery-tmpl):

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

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

Quel est le moyen le plus simple d'afficher un index d'éléments dans le modèle? De préférence sans utiliser de fonctions externes séparées, sans changer la structure d'objet passée, et sans changer de structure de modèle (conversion en {{each}}). Existe-t-il une variable intégrée qui stocke peut-être l'index de tableau actuel?

UPDATEJ'ai créé un ticket proposant d'exposer l'index de tableau à l'élément de modèle, mais il a été fermé comme non valide ...

jqueryjquery-templates
28
serg

Eh bien, ce n'est pas une fonction externe true séparée, mais vous pouvez appliquer une fonction sur l'objet options que vous pouvez transmettre à tmpl. J'ai fait ce qui suit et cela fonctionne bien:

$("#templateToRender").tmpl(jsonData,
  {
    dataArrayIndex: function (item) {
      return $.inArray(item, jsonData);
    }
  });

Dans le modèle, vous pouvez accéder à la fonction à partir de l'objet $item:

<script id="templateToRender" type="text/x-jquery-tmpl">
  <li>
    Info # ${$item.dataArrayIndex($item.data)}
  </li>
</script>

Alternativement, au lieu de passer $item.data à la fonction, le contexte de la fonction est l'objet tmplItem du modèle (identique à $ item.data). Vous pouvez donc écrire dataArrayIndex sans paramètre et accéder aux données via this.data.

28
kdawg

Voici un hack cheezy:

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

Créez une fonction en javascript pour incrémenter un compteur. Créez ensuite une fonction en javascript pour obtenir la position actuelle du compteur. Ces fonctions peuvent être appelées en utilisant {{ functionName() }}. Dans le passé, j'avais déjà utilisé la fonction dans un élément HTML, par exemple, dans une balise d'entrée masquée. Cela vous permettra d'utiliser un index.

2
user1748815

J'ai juste rencontré ce problème moi-même. Très frustrant! L'index de l'élément de modèle, par exemple, était toujours disponible dans jTemplates. N'aurait pas dû être difficile d'ajouter que dans je pense ...

La chose étrange est que dans Firebug je peux voir la propriété key pour chaque élément $: item key

Mais lorsque j'essaie d'y accéder depuis une fonction, j'appelle depuis le modèle:

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

Dans la fonction si je vérifie la propriété de la clé de l'élément, comme "item.key" ou "$ (item) .key", je reçois "non défini" et non la valeur réelle ...

2
poeticGeek

Un moyen facile de faire cela en utilisant jQuery 1.6.4 ou plus récent au moins.

D'abord comme vous vous en doutez, parcourez une collection

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

Fera le tour!

1
bobber205

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

Vous corrigez jquery.template et vous pouvez ensuite faire comme ceci:

<script id=”tabTemplate” type=”text/x-jquery-tmpl”>
    <div id=“tab-${$index + 1}”>
        <!— render tab contents here… —>
    </div>
</script>
1
v.tsurka

Il n'y a pas d'index facilement accessible. Une clé est ajoutée à chaque élément.

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

Cette clé est accessible via jquery. Ainsi, vous pouvez faire quelque chose comme

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

Mais ce n'est pas ce que tu voulais. Je ne pense pas que ce que tu voulais soit possible. L'objet $ {$ item} est censé représenter la méthode tmplItem (), mais il ne fournit pas de valeur pour ${$item.key}.. Utiliser ${$.tmplItem().key} produit 0 pour chaque ligne.

Donc, la réponse à votre question est ..... Non.

0
Tom B

définissez simplement une variable globale pour compter:

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