Jak znaleźć długość tablicy w szablonach kierownicy?


86

Mam szablon Handlebars, który jest renderowany przy użyciu obiektu JSON. W tym jsonie wysyłam tablicę. Lubię to:

var json = {
               "array":["abc","def","ghi","jkl"] 
}

Teraz w moim szablonie chcę znaleźć długość tej tablicy. Coś jak:

{{#each item}}
   {{ array.length }}
{{/each}}

Nie można go znaleźć w dokumentacji kierownic.

Odpowiedzi:


189

Mój błąd....

{{array.length}}faktycznie działał wewnątrz szablonu. Powinienem to sprawdzić / przetestować przed wysłaniem go tutaj.


37
Cóż, uratowałeś mnie przed koniecznością testowania, więc dzięki. :)
Perry Tew

8
To nie działa przynajmniej w przypadku smaku kierownicy Mandrills dla każdego, kto się zastanawia. Nie znalazłem jeszcze odpowiedniego zamiennika.
oneirois

43

W takim przypadku musisz odwołać się do zmiennej nadrzędnej każdego z każdego bloku:

{{#each array}}
    {{../array.length}}
{{/each}}

Wydaje mi się, że nazwa zmiennej „tablica” prawdopodobnie również komplikuje problem. Załóżmy, że dla wyjaśnienia jest jakiś inny JSON:

var json = {
    "fruit":["apple","orange","banana"]
};

Więc robiąc to:

<ul>
    {{#each fruit}}
        <li>{{this}} {{@index}} {{../fruit.length}}</li>
    {{/each}}
</ul>

Dałoby:

<ul>
    <li>apple 0 3</li>
    <li>orange 1 3</li>
    <li>banana 2 3</li>
</ul>

1
Myślę, że pozycje na liście byłybyapple 0 3 orange 1 3 banana 2 3
Paul

@Paul, masz rację, przykład zaktualizowany, aby odzwierciedlić poprawne wyjście.
Kevin Powell

Powiązane pytanie: jak uzyskać długość tablicy, gdy jest to bieżąca wartość potoku?
Gyscos

Składniowo ta odpowiedź ma więcej sensu niż przyjęta odpowiedź.
Neil Monroe

2

Możesz zdefiniować prostego pomocnika do obsługi tego:

Handlebars.registerHelper('get_length', function (obj) {
 return obj.length;
});   

A potem użyj go w swoim szablonie np:

{{get_length some_object}}

1

Jeśli testujesz pustą listę, aby wyświetlić zawartość ... W Ember.js, który używa kierownicy, możesz mieć inny dla #each.

{{#each blah as |blah|}}

{{else}}
 //   If array is empty
{{/each}}
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.