Jak uzyskać dostęp do elementu tablicy dostępu według indeksu w kierownicy?

270

Próbuję określić indeks elementu w tablicy w szablonie kierownicy:

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

używając tego:

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

Jeśli powyższe nie jest możliwe, jak napisałbym pomocnika, który mógłby uzyskać dostęp do określonego elementu w tablicy?

lukemh
źródło

Odpowiedzi:

409

Spróbuj tego:

<ul id="luke_should_be_here">
{{people.1.name}}
</ul>
dhorrigan
źródło
26
nie jest to nigdzie udokumentowane! Niesamowite.
lukemh
25
Dostaję Expecting 'ID'błąd z {{user.links.websites.1}} lub {{user.links.websites.0}}
Olivier Lalonde
131
@OlivierLalonde, musiałem użyć czegoś takiego {{ websites.[0] }}.
Matt
4
Rzeczywiście, @Matt, to nie tylko szczęśliwy format, ale rodzaj udokumentowanej składni. (Zobacz moją odpowiedź.)
Arjan
5
Co z ostatnim elementem w tablicy?
winduptoy
319

Następujące elementy, z dodatkową kropką przed indeksem , działają tak, jak oczekiwano. Tutaj nawiasy kwadratowe są opcjonalne, gdy po indeksie następuje inna właściwość:

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

Jednak nawiasy kwadratowe są wymagane w:

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

W tym ostatnim użycie numeru indeksu bez nawiasów kwadratowych dałoby jeden:

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

Nawiasem mówiąc: nawiasy są (również) używane w składni literału segmentu w celu odniesienia do rzeczywistych identyfikatorów (nie numerów indeksów), które w przeciwnym razie byłyby nieprawidłowe. Więcej szczegółów w Czym jest prawidłowy identyfikator?

(Testowane z kierownicą w YUI.)

2.xx Aktualizacja

Możesz teraz użyć getdo tego pomocnika:

(get people index)

chociaż jeśli pojawi się błąd dotyczący tego, że indeks musi być łańcuchem, wykonaj:

(get people (concat index ""))
Arjan
źródło
10
To powinna być odpowiedź, ponieważ jest bardziej szczegółowa niż wybrana odpowiedź. Wymaganie nawiasów kwadratowych na końcu indeksu sprawiło, że utknąłem na chwilę!
modulitos,
to załatwiło sprawę! dzięki ... wybrana odpowiedź powyżej nie, proszę zaznaczyć to jako poprawne.
MarioAraya
1
{{#with people.1}}Rozwiązanie pracował dla mnie, używając com.github.jknack:handlebars:4.1.2.
Ferran Maylinch,
21
{{#each array}}
  {{@index}}
{{/each}}
FMQB
źródło
Wspaniale, to jest poprawna odpowiedź. @index da ci pozycję w tablicy.
Oscar Romero
17

Jeśli nieudokumentowane funkcje nie są Twoją grą, to samo można osiągnąć tutaj:

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

Następnie w szablonie

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

Napisałem powyższe, zanim dostałem

this.[0]

Nie widzę, żeby ktoś posuwał się za daleko z kierownicą bez pisania własnych pomocników.

Bret Weinraub
źródło
8

Spróbuj tego, jeśli chcesz pobrać pierwszy / ostatni.

{{#each list}}

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

{{/each}}


{{#each list}}

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

{{/each}}
użytkownik1378423
źródło
7

Kiedy zapętlasz tablicę z eachi jeśli chcesz uzyskać dostęp do innej tablicy w kontekście bieżącego elementu, robisz to w ten sposób.

Oto przykładowe dane.

[
  {
    nazwa: „foo”,
    attr: [„boo”, „zoo”]
  },
  {
    nazwa: „bar”,
    attr: [„far”, „zar”]
  }
]

Oto kierownica, aby uzyskać pierwszy przedmiot w attrtablicy.

{{#każdy gracz}}
  <p> {{this.name}} </p>

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

{{/każdy}}

To wyjdzie

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

<p> pasek </p>
<p> daleko </p>
Fatih Acet
źródło
jeśli tablica attr ma różną liczbę elementów dla różnych obiektów, to jaki będzie proces iteracji przez nią? na przykład: [{name: 'foo', attr: ['boo', 'zoo']}, {name: 'bar', attr: ['far', 'zar', 'sar]}] to jak pokażesz wszystkie attr dla każdego obiektu tablicy?
Partha Roy
nie próbowałem tego, ale zakładam, że w {{#with this.attr}} thisbędzie działać zamiastthis.[0]
Fatih Acet
1

Poniższej składni można również użyć, jeśli tablica nie ma nazwy (tylko tablica jest przekazywana do szablonu):

  <ul id="luke_should_be_here">
  {{this.1.name}}
  </ul>
José
źródło
0

W moim przypadku chciałem uzyskać dostęp do tablicy wewnątrz niestandardowego pomocnika,

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

Co nie działało, ale zadziałała odpowiedź sugerowana przez @julesbou.

Kod roboczy:

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

Mam nadzieję że to pomoże! Twoje zdrowie.

Sharukh Mastan
źródło