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?

Odpowiedzi:


409

Spróbuj tego:

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

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 ""))

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}}

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.



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}}

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>

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>

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.