Comment accéder à un élément de tableau d'accès par index dans le guidon?

270

J'essaie de spécifier l'index d'un élément dans un tableau dans un modèle de guidon:

{
  people: [
    {"name":"Yehuda Katz"},
    {"name":"Luke"},
    {"name":"Naomi"}
  ]
}

en utilisant ceci:

<ul id="luke_should_be_here">
{{people[1].name}}
</ul>

Si ce qui précède n'est pas possible, comment pourrais-je écrire un assistant qui pourrait accéder à un élément spécifique dans le tableau?

lukemh
la source

Réponses:

409

Essaye ça:

<ul id="luke_should_be_here">
{{people.1.name}}
</ul>
Dhorrigan
la source
26
ce n'est documenté nulle part! Impressionnant.
lukemh
25
Je reçois une Expecting 'ID'erreur avec {{user.links.websites.1}} ou {{user.links.websites.0}}
Olivier Lalonde
131
@OlivierLalonde, j'ai dû utiliser quelque chose comme {{ websites.[0] }}.
Matt
4
En effet, @Matt, ce n'est pas seulement un format chanceux, mais c'est une sorte de syntaxe documentée. (Voir ma réponse.)
Arjan
5
Qu'en est-il du dernier élément d'un tableau?
winduptoy
319

Ce qui suit, avec un point supplémentaire avant l'index , fonctionne comme prévu. Ici, les crochets sont facultatifs lorsque l'index est suivi d'une autre propriété:

{{people.[1].name}}
{{people.1.name}}

Cependant, les crochets sont requis dans:

{{#with people.[1]}}
  {{name}}
{{/with}}

Dans ce dernier, l'utilisation du numéro d'index sans les crochets en obtiendrait un:

Error: Parse error on line ...:
...     {{#with people.1}}                
-----------------------^
Expecting 'ID', got 'INTEGER'

En passant: les crochets sont (également) utilisés pour la syntaxe de segment littéral , pour faire référence à des identificateurs réels (pas des numéros d'index) qui autrement seraient invalides. Plus de détails dans Qu'est-ce qu'un identifiant valide?

(Testé avec guidon en YUI.)

Mise à jour 2.xx

Vous pouvez maintenant utiliser l' getassistant pour cela:

(get people index)

bien que si vous obtenez une erreur sur l'index devant être une chaîne, faites:

(get people (concat index ""))
Arjan
la source
10
Cela devrait être la réponse car elle est plus approfondie que la réponse sélectionnée. Exiger des crochets lorsque l'index est à la fin m'a coincé pendant un certain temps!
modulitos
cela a fait l'affaire! merci ... la réponse choisie ci-dessus ne l'a pas été, veuillez la marquer comme correcte.
MarioAraya
1
La {{#with people.1}}solution a fonctionné pour moi, en utilisant com.github.jknack:handlebars:4.1.2.
Ferran Maylinch
21
{{#each array}}
  {{@index}}
{{/each}}
FMQB
la source
Génial, c'est la bonne réponse. @index vous donnera la position dans le tableau.
Oscar Romero
17

Si les fonctionnalités non documentées ne sont pas votre jeu, la même chose peut être accomplie ici:

Handlebars.registerHelper('index_of', function(context,ndx) {
  return context[ndx];
});

Puis dans un modèle

{{#index_of this 1}}{{/index_of}}   

J'ai écrit ce qui précède avant de mettre la main sur

this.[0]

Je ne peux pas voir quelqu'un aller trop loin avec le guidon sans écrire vos propres aides.

Bret Weinraub
la source
8

Veuillez essayer ceci, si vous voulez aller chercher le premier / dernier.

{{#each list}}

    {{#if @first}}
        <div class="active">
    {{else}}
        <div>
    {{/if}}

{{/each}}


{{#each list}}

    {{#if @last}}
        <div class="last-element">
    {{else}}
        <div>
    {{/if}}

{{/each}}
user1378423
la source
7

Pendant que vous bouclez dans un tableau avec eachet si vous souhaitez accéder à un autre tableau dans le contexte de l'élément en cours, faites-le comme ceci.

Voici les données d'exemple.

[
  {
    nom: 'foo',
    attr: ['boo', 'zoo']
  },
  {
    nom: «bar»,
    attr: ['loin', 'zar']
  }
]

Voici le guidon pour obtenir le premier élément du attrtableau.

{{#chaque joueur}}
  <p> {{this.name}} </p>

  {{#with this.attr}}
    <p> {{this. [0]}} </p>
  {{/avec}}

{{/chaque}}

Cela produira

<p> foo </p>
<p> boo </p>

<p> bar </p>
<p> loin </p>
Fatih Acet
la source
si le tableau attr a un nombre différent d'éléments pour différents objets, alors quel sera le processus pour le parcourir? par exemple: [{name: 'foo', attr: ['boo', 'zoo']}, {name: 'bar', attr: ['far', 'zar', 'sar]}] alors comment vont vous allez montrer tous les attr pour tous les objets du tableau?
Partha Roy
je ne l'ai pas essayé mais je suppose que dans {{#with this.attr}} thisfonctionnerait à la place dethis.[0]
Fatih Acet
1

La syntaxe suivante peut également être utilisée si le tableau n'est pas nommé (seul le tableau est transmis au modèle):

  <ul id="luke_should_be_here">
  {{this.1.name}}
  </ul>
José
la source
0

Dans mon cas, je voulais accéder à un tableau à l'intérieur d'un assistant personnalisé comme ça,

{{#ifCond arr.[@index] "foo" }}

Ce qui n'a pas fonctionné, mais la réponse suggérée par @julesbou a fonctionné.

Code de travail:

{{#ifCond (lookup arr @index) "" }}

J'espère que cela t'aides! À votre santé.

Sharukh Mastan
la source